Javascript Learner

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...