给路由命名

给路由命名，可以使用组件名来指定跳转路径。具体看例子吧。

本篇基于路由的query参数中的完整实例。

在router/index.js中的两条路由规则中添加命名：guanyu、xiangqing，如下所示。

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes:[
        {
            name:"guanyu",
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"xiangqing",
                            path:"detail",
                            component:Detail
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

在routerLink标签中指定跳转组件时，可以通过组件名实现，对App.vue、Message.vue分别进行如下修改。

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link :to="{name:'guanyu'}" active-class="active" class="list-group-item">About</router-link>
          <router-link to="/home" active-class="active" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner.vue";

export default {
  name: 'App',
  components:{
    Banner
  }
}
</script>

<template>
    <div>
        <ul>
            <li v-for="message in messageList" :key="message.id">
                <router-link :to="{
                    name:'xiangqing',
                    query:{
                        id:message.id,
                        title:message.title
                    }
                }">
                    {{message.title}}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    }
}
</script>

<style>

</style>

重启应用，测试，依然ok。