VueRouter系列的文章示例编写时，项目是使用vue-cli脚手架搭建。
项目搭建的步骤和项目目录专门写了一篇文章：点击这里进行传送
后续VueRouter系列的文章的示例编写均基于该项目环境。
VueRouter系列文章链接
《VueRouter爬坑第一篇-简单实践》
《VueRouter爬坑第二篇-动态路由》
《VueRouter爬坑第三篇-嵌套路由》
《VueRouter爬坑第四篇-命名路由、编程式导航》
阅读目录
一.前言
二.命名路由
三.编程式导航
四.命名路由+$router.push
一.前言
前面三篇VueRouter系列文章，第一篇我们先是对路由做了一个简单的实践。
第二篇实践了动态路由的使用；
第三篇实践了嵌套路由的使用场景和用法；
本篇文章将实践一下命令路由和编程式导航这两个名词所涵盖的技术点。
二.命名路由
命名路由，字面意思就是给路由起个名字。
那给路由起了名字有什么作用呢？
前面几篇文章中，我们配置的to属性值时，设置的是routes中的path。
那么当我们给路由配置名称后，这个to属性的值就可以设置为路由的名称。
我们接着上一节演示的那个场景示例，将其使用嵌套路由进行重写。
1.给路由配置名称
首先呢，我们先在router.js中给路由添加名称
E:\MyStudy\test\VueDemo\src\router\router.js
1 import Vue from "vue"
2 import Router from "vue-router"
3 Vue.use(Router)
4
5 // 引入路由需要映射的组件
6 import Content from '@/components/Content.vue'
7 import ProductDetail from '@/components/ProductDetail.vue'
8 const routes = 【
9 {
10 path: '/products',
11 name: 'productsRoute', // 给路由配置名称
12 component: Content,
13 children:【
14 {
15 path: '/productDetail/:id',
16 name: 'productDetailRoute', // 给路由配置名称
17 component: ProductDetail
18 }
19 】
20 }
21 】
22
23 const router = new Router({
24 routes: routes
25 })
26
27 export default router
新增的代码为：11行和16行。
可以看到，为路由配置名称的语法就是在单条路由配置中添加name属性即可。
2.重写组件中的路由跳转代码
给路由配置名称后，接着需要做的事情就是修改组件中路由跳转的代码。
先修改App.vue组件中的路由跳转代码
E:\MyStudy\test\VueDemo\src\App.vue
1 [/span>template
2 [/span>div id="app"
3
4 [/span>ul
5 [/span>li v-for='(item,index) in menuList' v-bind:key='index'
6 [/span>router-link v-bind:to='{name: item.routeName}'
7
8
9
10 [/span>router-view />
11
12
13
14 [/span>script
15 export default {
16 name: 'App',
17 data() {
18 return {
19 menuList: 【
20 {
21 url: '/index',
22 name: '首页',
23 routeName: 'indexRoute',
24 },{
25 url: '/products',
26 name: '产品',
27 routeName: 'productsRoute',
28 }
29 】
30 }
31 }
32 }
33
34
35 [/span>style
36 #app {
37 font-family: 'Avenir', Helvetica, Arial, sans-serif;
38 -webkit-font-smoothing: antialiased;
39 -moz-osx-font-smoothing: grayscale;
40 color: #2c3e50;
41 }
42 ul {
43 display: inline-block;
44 Width＜/span>: 100px;
45 border: 1px solid #ddd;
46 padding: 100px 0px 100px 20px;
47 position: fixed;
48 top: -10px;
49 bottom: 0px;
50 }
51 a{
52 text-decoration: none;
53 }
54
App组件中，修改的代码在第6行，同时新增了22行、26行两行代码。
核心的代码如下：
[/span>router-link v-bind:to='{name: item.routeName}'
接着是Content.vue组件
E:\MyStudy\test\VueDemo\src\Components\Content.vue
1 [/span>template
2 [/span>div class='productContent'
3 [/span>div class="productList"
4
5 [/span>h1
6 [/span>p v-for="(item,index) in productsList" v-bind:key='index'
7 [/span>router-link v-bind:to="{name: item.routeName,params:{id:index+1}//代码效果参考：http://www.ezhiqi.com/zx/art_4512.html }"
8
9
10
11 [/span>router-view />
12
13
14 [/span>script
15 export default {
16 name: 'Content',
17 data() {
18 return {
19 productsList: 【
20 {
21 url: '/productDetail/1',
22 name: '产品1',
23 routeName: 'productDetailRoute
