vue2.0vue路由 嵌套(多级)路由

嵌套(多级)路由

一级路由

{
    //第一组路由规则
    path:'/about',
    component:About
}

要实现二级路由得把规则写在一级路由里面

既然是一级路由的下一级路由(子路由);得写一个特殊的配置项:children(孩子们):

....
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Messgae from '../pages/Message.vue'

export default new VueRouter({
    routes:[
        {
            //第一组路由规则
            path:'/home',
            component:Home
            children:[//为什么是数组形式?因为可能有多个子路由
                {
                    path:'news',//这里的路径就不要加'/'了,因为底层给你遍历这一堆规则的时候人家已经给你加上'/'了
                    component:News,
                }
            ]
        },
    ]
})

如果你在子路由上的路径加了/路径的变化是没有问题的，但是底层匹配的时候就整不会了

接下来就在Home.vue路由组件模板语法里面添加<router-link></router-link>

<router-link to="/news">News</router-link>
<router-link to="/message">Message</router-link>
<router-view></router-view>

点击news路径变成了:

http://localhost:8080/#/news

为什么?

因为没有对应规则;刚才的路径/home变成了/news是一种路径的改变

路径改变了，前端路由器就监测到了，然后路由器拿着你的/news回到路由规则(router > index.js)里面进行匹配(在routes里面问)对比完毕没有对的上的，所以页面什么都不成现

你要/home先匹配上进而才看里面的children

所以得这么写:

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></router-view>

如果你写的是子路由(二级路由)你写路径的时候就必须带着你的父路由的路径

---

子路由的路径注意点

• 写路径的时候不要带/因为底层默认会给你加上去的
• 写<router-link to="">的时候基本写法必须带着父路由的路径