Vue学习：命名路由

name：给路由对应规则取名字

下面一级路由和三级路由上面有name，也就是使用router-link 可以使用：to name

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
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:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

path改成了name=路径长简化了跳转

        <router-link :to="{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">

 <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>