Vue 多级路由

一、配置路由

关键字 children 注意 子路由 path 不加斜杠

src/router/index.js

export default new VueRouter({
    routes:[
        {   
            // path 是路径，component是组件
            path: '/about',
            component: AboutData
        },
        {
            path:'/home',
            component: HomeData,
            children:[
                {
                    path:'message',
                    component: MessageData
                },
                {
                    path:'news',
                    component: NewsData
                }
            ]
        }
    ]
})

二、跳转(要写完整路径)

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

注意：设置子路由path 不要加 /，跳转路径要写全