Vue - router 嵌套路由

嵌套路由的概念

 嵌套路由的实现

嵌套路由实现的代码片段

index.js

import Home from '@/components/Home'
const HomeMessage = () => import('@/components/HomeMessage')
const HomeNews = () => import('@/components/HomeNews')

const HelloWorld = () => import('@/components/HelloWorld') // router 懒加载模式
const User = () => import('@/components/User') // router 懒加载模式

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '',
      redirect: "HelloWorld"
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '',
          redirect: 'news' // 默认加载页
        },
        {
          path: 'news', // 无需加斜杠 /news
          component: HomeNews
        },
        {
          path: 'message',
          component: HomeMessage
        },
      ]
    },
    {
      path: '/user/:pathUserId',
      component: User
    }
  ],
  mode: 'history' // xxx/#/user -> xxx/user
})

HomeNews.vue

<template>
   <div>
     <ul>
       <li>news 1</li>
       <li>news 2</li>
       <li>news 3</li>
     </ul>
   </div>
</template>

<script>
export default {
   name: "HomeNews",
}
</script>

HomeMessage.vue

<template>
   <div>
      <ul>
       <li>message 1</li>
       <li>message 2</li>
       <li>message 3</li>
     </ul>
   </div>
</template>

<script>
export default {
  name: "HomeMessage",
}
</script>

Home.vue

<template>
  <div>
    <h2>Home Page</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>