Javascript Learner

Navigation Guards: means that before reaching a route to a component, its runs guard in advance which will redirect to or cancel routing. Example: product.js route file import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const vigo = { template: `<div> <h2>Hello vigo</h2> </div>` } const navBar = { template: `<div> <ul> <li><router-link v-bind:to="{ path:'list' }">Product all</router-link></li> </ul> </div>` } const setting = { template: ` <div> <navBar /> <router-view /> <router-view name='status' /> <router-view name='detail' /> </div>` , components: { navBar } } ...

Passing Props to Route Component: this means to pass props by router. There are two options to receive props: first one is inside template: $route.params.id second one is as props inside vue component : props: ['id'] Example: product.js for router file import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const navBar = { template: `<div> <ul> <li><router-link v-bind:to="{ path:'list' }">Product all</router-link></li> </ul> </div>` } const setting = { template: ` <div> <navBar /> <router-view /> <router-view name='status' /> <router-view name='detail' /> </div>` , components: { navBar } } const status = {...

Redirect and Alias : redirect means when you user visits '/a' , url will be replaced by '/b' while Alias means user see '/b' url whereas the real url is '/a'.  Example: path: 'products' , name: 'products' , redirect: 'detail'  As you see above if there is no redirect: 'detail', when you click on product all button, you see list of product with product status but with redirect keyword you may see product detail. full example: product.js import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const navBar = { template: `<div> <ul> <li><router-link v-bind:to="{ path:'products' }">Product all</router-link></li> <li><router-link v-bind:to="{ path:'detail' }">Product detail</router-link>...

Named Views: instead of nested multi-views to render at the same time, named views can help to simplify not to nest. Example: product.js for route file import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const navBar = { template: `<div> <ul> <li><router-link v-bind:to="{ path:'products' }">Product all</router-link></li> <li><router-link v-bind:to="{ path:'detail' }">Product detail</router-link></li> </ul> </div>` } const setting = { template: ` <div> <navBar /> <router-view /> <router-view name='status' /> <router-view name='detail' /> </div>` , components: { navBar...

Named Route: is used to navigate to a component, specifically you may go from component A to B when you click on a link or button. Example: product.js file for named route. import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const detail = { template: `<div> product detail </div>` } const product = { template: `<div> productId:{{ $route.params.id }} <router-view></router-view> </div>` , watch: { '$route' ( to , from ){ console . log ( from ) } }, } const routes = [ { path: '/product/:id' , name: 'product' , component: product , children: [ { path: 'detail' , name: 'detail' , component: detail } ] } ] const router = new VueRouter ({ routes // short for `routes: routes` }) ...

Programmatic Navigation: means we are possibly to navigate to a component by using $router instance rather than <router-link :to="#"></router-link>. Example: product.js route file import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const detail = { template: `<div> product detail </div>` } const product = { template: `<div> productId:{{ $route.params.id }} <router-view></router-view> </div>` , watch: { '$route' ( to , from ){ console . log ( from ) } }, } const routes = [ { path: '/product/:id' , name: 'product' , component: product , children: [ { path: 'detail' , name: 'detail' , component: detail } ] } ] const router = new VueRouter ({ routes // short...

Nested Route means that routes inside other routes. Route can have multiple levels. Example: product.js for route file import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const detail = { template: `<div> product detail </div>` } const product = { template: `<div> productId:{{ $route.params.id }} <router-view></router-view> </div>` , watch: { '$route' ( to , from ){ console . log ( from ) } }, } const routes = [ { path: '/product/:id' , name: 'product' , component: product , children: [ { path: 'detail' , name: 'detail' , component: detail } ] } ] const router = new VueRouter ({ routes // short for `routes: routes` }) export { router } As you above, i have two...

Dynamic Route is very important to know this route due to with real world app, you will frequently use it. this means that route with parameters. In case routes or named routes are duplicated, the order of route will be used as the first will be prioritized. Example: route file product.js import Vue from 'vue' import VueRouter from 'vue-router' Vue . use ( VueRouter ) const product = { template: `<div> productId:{{ $route.params.id }} </div>` , watch: { '$route' ( to , from ){ console . log ( from ) } }, } const routes = [ { path: '/product/:id' , name: 'product' , component: product } ] const router = new VueRouter ({ routes // short for `routes: routes` }) export { router } Here is dynamic route: meaning that id can be any number, 1, 2,3... { path: '/product/:id'...