VueRouter爬坑第四篇-命名路由、编程式导航

---

VueRouter系列的文章示例编写时，项目是使用vue-cli脚手架搭建。

项目搭建的步骤和项目目录专门写了一篇文章：点击这里进行传送

后续VueRouter系列的文章的示例编写均基于该项目环境。

---

 VueRouter系列文章链接

　　《VueRouter爬坑第一篇-简单实践》

　　《VueRouter爬坑第二篇-动态路由》

　　《VueRouter爬坑第三篇-嵌套路由》

　　《VueRouter爬坑第四篇-命名路由、编程式导航》

---

 阅读目录

一.前言

二.命名路由

三.编程式导航

四.命名路由+$router.push

---

一.前言

　　前面三篇VueRouter系列文章，第一篇我们先是对路由做了一个简单的实践。

　　第二篇实践了动态路由的使用；

　　第三篇实践了嵌套路由的使用场景和用法；

　　本篇文章将实践一下命令路由和编程式导航这两个名词所涵盖的技术点。

二.命名路由

　　命名路由，字面意思就是给路由起个名字。

　　那给路由起了名字有什么作用呢？

　　前面几篇文章中，我们配置<router-link>的to属性值时，设置的是routes中的path。

　　那么当我们给路由配置名称后，这个to属性的值就可以设置为路由的名称。

　　我们接着上一节演示的那个场景示例，将其使用嵌套路由进行重写。

1.给路由配置名称

　　首先呢，我们先在router.js中给路由添加名称

E:\MyStudy\test\VueDemo\src\router\router.js

 import Vue from "vue"
 import Router from "vue-router"
 Vue.use(Router)
 
 // 引入路由需要映射的组件
 import Content from '@/components/Content.vue'
 import ProductDetail from '@/components/ProductDetail.vue'
 const routes = [
     {
         path: '/products',
         name: 'productsRoute',   // 给路由配置名称
         component: Content,
         children:[
             {
                 path: '/productDetail/:id',
                 name: 'productDetailRoute',  // 给路由配置名称
                 component: ProductDetail
             }
         ]
     }
 ]
 
 const router = new Router({
     routes: routes
 })
 
 export default router

　　新增的代码为：11行和16行。

　　可以看到，为路由配置名称的语法就是在单条路由配置中添加name属性即可。

2.重写组件中的路由跳转代码

　　给路由配置名称后，接着需要做的事情就是修改组件中路由跳转的代码。

　　先修改App.vue组件中的路由跳转代码

E:\MyStudy\test\VueDemo\src\App.vue

 <template>
   <div id="app">
     <!-- 菜单  -->
     <ul>
       <li v-for='(item,index) in menuList' v-bind:key='index' >
           <router-link v-bind:to='{name: item.routeName}'>{{item.name}}</router-link>
       </li>
     </ul>
     <!-- 内容区 -->
     <router-view />
   </div>
 </template>
 
 <script>
 export default {
   name: 'App',
   data() {
     return {
       menuList: [
         {
           url: '/index',
           name: '首页',
           routeName: 'indexRoute',
         },{
           url: '/products',
           name: '产品',
           routeName: 'productsRoute',
         }
       ]
     }
   }
 }
 </script>
 
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
 }
 ul {
     display: inline-block;
     width: 100px;
     border: 1px solid #ddd;
     padding: 100px 0px 100px 20px;
     position: fixed;
     top: -10px;
     bottom: 0px;
 }
 a{
   text-decoration: none;
 }
 </style>

　　App组件中，修改的代码在第6行，同时新增了22行、26行两行代码。

　　核心的代码如下：

<router-link v-bind:to='{name: item.routeName}'>{{item.name}}</router-link>

　　接着是Content.vue组件

E:\MyStudy\test\VueDemo\src\Components\Content.vue

 <template>
     <div class='productContent'>
         <div class="productList">
             <!-- 产品列表  -->
             <h1>产品列表</h1>
             <p v-for="(item,index) in productsList" v-bind:key='index'>
                 <router-link v-bind:to="{name: item.routeName,params:{id:index+1}}">{{item.name}}</router-link>
             </p>
         </div>
         <!-- 产品详情 -->
         <router-view />
     </div>
 </template>
 <script>
 export default {
     name: 'Content',
     data() {
         return {
             productsList: [
                 {
                     url: '/productDetail/1',
                     name: '产品1',
                     routeName: 'productDetailRoute'
                 },{
                     url: '/productDetail/2',
                     name: '产品2',
                     routeName: 'productDetailRoute'
                 }
             ]
         }
     }
 
 }
 </script>
 <style scoped>
     .productContent{
         margin-left: 150px;
     }
     .productList{
         border:1px solid #ddd;
         margin: 10px;
     }
 </style>

　　Content.vue组件中，修改了第7行的代码，同时新增22行、26行两行代码。

　　核心的代码如下：

<router-link v-bind:to="{name: item.routeName,params:{id:index+1}}">{{item.name}}</router-link>

　　ProductDetail.vue组件没有修改。

　　这里呢，总结一下：

　　1.route.js中配置路由名称使用name选项

　　2.route-link使用name时，需要使用字典{name: '路由名称'}，而不能直接向使用path一样绑定一个字符串

　　3.route-link编写动态路由的动态参数使用params设置。

　　

　　代码修改完成，查看结果：

　　

　　可以看到，结果和之前的一样。

三.编程式导航

　　在前面几篇VueRouter的学习过程中，我们一直使用的是<router-link>编写可跳转的URL。

　　官方文档把这种方式成为声明式的导航。

　　而另外一种可以与之替代的就是编程式导航：使用router实例的push方法实现URL跳转。

还是嵌套路由这个示例，router.js不做修改，依然是前面的代码

1.将App组件中的route-link改为router.push实现

E:\MyStudy\test\VueDemo\src\App.vue

 <template>
   <div id="app">
     <!-- 菜单  -->
     <ul>
       <li v-for='(item,index) in menuList' v-bind:key='index' >
           <p v-on:click='menuHandler(item.url)'> {{ item.name }}</p>
       </li>
     </ul>
     <!-- 内容区 -->
     <router-view />
   </div>
 </template>
 
 <script>
 export default {
   name: 'App',
   data() {
     return {
       menuList: [
         {
           url: 'index',
           name: '首页',
           routeName: 'indexRoute',
         },{
           url: 'products',
           name: '产品',
           routeName: 'productsRoute',
         }
       ]
     }
   },
   methods: {
     menuHandler: function(url){
       this.$router.push(url);   //或者$router.push(url);
     }
   }
 }
 </script>
 
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
 }
 ul {
     display: inline-block;
     width: 100px;
     border: 1px solid #ddd;
     padding: 100px 0px 100px 20px;
     position: fixed;
     top: -10px;
     bottom: 0px;
 }
 li{
   cursor: pointer;
 }
 a{
   text-decoration: none;
 }
 </style>

App.vue组件中修改了第6行的代码；同时新增了一个methods：menuHandler处理菜单点击的逻辑。

　　menuHandler函数中的逻辑就是vue编程式导航的实现代码。

　　App组件中的修改总结一下：

　　　　menuHandler方法中的this.$router.push(url)代码，它和$router.push(url)是等价的。

　　　　而且当我们给push传入一个字符串参数时，默认是传递的值是url，匹配的就是routes中的path参数。

　　　　因此menuHandler方法中的逻辑也可以写成this.$router.push({path:url})或者$router.push({path:url})　

2.Content组件中的route-link改为router.push实现

E:\MyStudy\test\VueDemo\src\Components\Content.vue

 <template>
     <div class='productContent'>
         <div class="productList">
             <!-- 产品列表  -->
             <h1>产品列表</h1>
             <p v-for="(item,index) in productsList" v-bind:key='index' v-on:click='productHandle(index)'>
                 {{item.name}}
             </p>
         </div>
         <!-- 产品详情 -->
         <router-view />
     </div>
 </template>
 <script>
 export default {
     name: 'Content',
     data() {
         return {
             productsList: [
                 {
                     url: '/productDetail/1',
                     name: '产品1',
                     routeName: 'productDetailRoute'
                 },{
                     url: '/productDetail/2',
                     name: '产品2',
                     routeName: 'productDetailRoute'
                 }
             ]
         }
     },
     methods: {
         productHandle: function(index) {
             var id = index+1;
             this.$router.push('/productDetail/'+id); //或者$router.push('/productDetail/'+id);
         }
     }
 
 }
 </script>
 <style scoped>
     .productContent{
         margin-left: 150px;
     }
     .productList{
         border:1px solid #ddd;
         margin: 10px;
     }
     p{
         cursor: pointer;
     }
 </style>

　   Content.vue组件编程式导航写法为：this.$router.push('/productDetail/'+id);

　　其中默认传递的字符串参数匹配的是路由配置中的path。

　　因此this.$router.push('/productDetail/'+id)也可以是如下写法：

　　　　this.$router.push({path: '/productDetail/'+id);

　　注意：

　　当使用path去匹配路由的时候，params这个参数是不生效的。

　　因此this.$router.push({path: 'productDetail'，params:{id:id})这种写法是无效的。

　　

　　代码修改完成，我们还是来看下结果对不对

　　

　　可以看到，和前面命令式写法、路由命名这两个是相同的结果。

四.命令路由+$router.push

　　vuerouter系列的前三篇文章中，我们使用路由配置的path选项结合声明式导航<router-link>实现路由跳转。

　　本篇中先是使用路由配置中的name结合声明式导航<router-link>实现路由跳转。

　　接着实践了编程式导航$router.push并匹配路由配置中的path实现路由跳转。

　　那么在排列组合一下，我们就在实践一下编程式导航$router.push结合命令路由实现路由跳转。

E:\MyStudy\test\VueDemo\src\App.vue

<template>
  <div id="app">
    <!-- 菜单  -->
    <ul>
      <li v-for='(item,index) in menuList' v-bind:key='index' >
          <p v-on:click='menuHandler(item.url)'> {{ item.name }}</p>
      </li>
    </ul>
    <!-- 内容区 -->
    <router-view />
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      menuList: [
        {
          url: 'index',
          name: '首页',
          routeName: 'indexRoute',
        },{
          url: 'products',
          name: '产品',
          routeName: 'productsRoute',
        }
      ]
    }
  },
  methods: {
    menuHandler: function(url){
      //使用命名路由
      this.$router.push({name:'productsRoute'})
    }
  }
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
ul {
    display: inline-block;
    width: 100px;
    border: 1px solid #ddd;
    padding: 100px 0px 100px 20px;
    position: fixed;
    top: -10px;
    bottom: 0px;
}
li{
  cursor: pointer;
}
a{
  text-decoration: none;
}
</style>

　　核心代码如下：

menuHandler: function(url){
     //使用命名路由
    this.$router.push({name:'productsRoute'})
}

E:\MyStudy\test\VueDemo\src\Components\Content.vue

 <template>
     <div class='productContent'>
         <div class="productList">
             <!-- 产品列表  -->
             <h1>产品列表</h1>
             <p v-for="(item,index) in productsList" v-bind:key='index' v-on:click='productHandle(index)'>
                 {{item.name}}
             </p>
         </div>
         <!-- 产品详情 -->
         <router-view />
     </div>
 </template>
 <script>
 export default {
     name: 'Content',
     data() {
         return {
             productsList: [
                 {
                     url: '/productDetail/1',
                     name: '产品1',
                     routeName: 'productDetailRoute'
                 },{
                     url: '/productDetail/2',
                     name: '产品2',
                     routeName: 'productDetailRoute'
                 }
             ]
         }
     },
     methods: {
         productHandle: function(index) {
             var id = index+1;
             //使用命令路由
             this.$router.push({name:'productDetailRoute', params: {id: id}})
         }
     }
 
 }
 </script>
 <style scoped>
     .productContent{
         margin-left: 150px;
     }
     .productList{
         border:1px solid #ddd;
         margin: 10px;
     }
     p{
         cursor: pointer;
     }
 </style>

　　核心代码如下：

productHandle: function(index) {
     var id = index+1;
      //使用命令路由
      this.$router.push({name:'productDetailRoute', params: {id: id}})
}

　　关于这两个组件的核心代码我已分别贴出，比较简单这里就不多说了。

　　最后的结果也和前面一致。

　　

　　到此本篇文章完！

---