scrollbehave

Author: nil1729

vue-noob-router/src/App.vue

@@ -15,4 +15,7 @@ export default {
 </script>
 
 <style>
+::-webkit-scrollbar {
+  width: 0;
+}
 </style>

vue-noob-router/src/components/layouts/Navbar.vue

@@ -5,6 +5,13 @@
         <li class="nav-item">
           <router-link active-class="active" exact to="/" class="btn btn-sm btn-info mx-2">Home</router-link>
         </li>
+        <li class="nav-item">
+          <router-link
+            active-class="active"
+            :to="{name: 'About', hash: `#${index}`}"
+            class="btn btn-sm btn-info mx-2"
+          >About</router-link>
+        </li>
         <li class="nav-item">
           <router-link active-class="active" to="/user" class="btn btn-sm btn-info mx-2">User</router-link>
         </li>
@@ -19,6 +26,16 @@
 <script>
 export default {
   name: "AppNavbar",
+  data() {
+    return {
+      index: 3,
+    };
+  },
+  watch: {
+    $route() {
+      this.index = Math.floor(Math.random() * 3) + 1;
+    },
+  },
 };
 </script>
 

vue-noob-router/src/components/pages/About.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="container center">
-    <h1 class="light-green-text">About Page</h1>
-    <button @click="goToHome" class="btn">Go to Home</button>
+  <div>
+    <div v-for="i in 3" :key="i" :id="i" class="container my-2">
+      <h3 class="text-danger">About {{ i }}</h3>
+      <p
+        class="lead"
+      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit aliquid consectetur sint numquam voluptatem. Labore corporis nulla dolorum fugiat quaerat earum delectus eaque harum, debitis, velit aliquid distinctio, eveniet eum deleniti repellendus reiciendis vel! Laboriosam repudiandae ab ullam reprehenderit quidem.</p>
+    </div>
   </div>
 </template>
 
@@ -16,5 +20,10 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.container {
+  height: 60vh;
+  padding: 1rem;
+  background-color: aliceblue;
+}
 </style>

vue-noob-router/src/main.js

@@ -9,6 +9,16 @@ Vue.use(VueRouter);
 const router = new VueRouter({
 	routes,
 	mode: 'history',
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition) {
+			return savedPosition;
+		}
+		if (to.hash) {
+			return {
+				selector: to.hash,
+			};
+		}
+	},
 });
 
 new Vue({

vue-noob-router/src/routes.js

@@ -1,5 +1,5 @@
 import Home from '@/components/pages/Home.vue';
-// import About from '@/components/pages/About.vue';
+import About from '@/components/pages/About.vue';
 import User from '@/components/pages/User.vue';
 import UserStart from '@/components/User/UserStart.vue';
 import UserDetail from '@/components/User/UserDetail.vue';
@@ -9,13 +9,20 @@ import NotFound from '@/components/pages/404.vue';
 export const routes = [
 	{
 		path: '/',
-		component: Home,
 		name: 'Home',
 		components: {
 			default: Home,
 			'navbar-top': Navbar,
 		},
 	},
+	{
+		name: 'About',
+		path: '/about',
+		components: {
+			default: About,
+			'navbar-top': Navbar,
+		},
+	},
 	{
 		path: '/user',
 		children: [