配置路由

通过children配置子路由

多级路由中的path不加斜杠

// 创建并暴露一个路由器
export default new VueRouter({
    // 注意单词的拼写
    routes:[
        {
            path: '/about',
            // 组件的名字
            component: MyAbout
        },
        {
            path: '/home',
            component: MyHome,
            children:[
                {
                    // 多级路由中的path不加斜杠
                    path:'news',
                    component: MyNews,
                },
                {
                    path:'message',
                    component: MyMessage,
                },
            ]
        }
    ]
})

多级路由的跳转地址需要填写完整

<ul class="nav nav-tabs">
  <li>
    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
  </li>
  <li>
    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
  </li>
</ul>