嵌套路由

1、配置嵌套路由src/router/index.js

/*
路由器模块
 */

// 引入Vue
import Vue from 'vue'

// 引入路由器插件
import VueRouter from 'vue-router'

// 引入路由组件
import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'

// 声明使用路由器插件
Vue.use(VueRouter)

// 向外暴露路由器对象。这里为默认暴露，则引入的时候可使用任何名字
export default new VueRouter({
  // 配置N个路由
  // path指定路由地址
  // component指定路由地址对应的路由组件
  // redirect重定向到某个路由
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      // children配置嵌套路由
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: 'message', // 等效于/home/message
          component: Message
        },
        {
          path: '', // 路径/home时会自动跳转到路径/home/news
          redirect: '/home/news'
        }
      ]
    },
    {
      // 访问项目根路径时重定向到/about路由
      path: '/',
      redirect: '/about'
    }
  ]
})

 

2、使用嵌套路由

<div>
      <ul class="nav nav-tabs">
        <li><router-link to="/home/news">News</router-link></li>
        <li><router-link to="/home/message">Message</router-link></li>
      </ul>
      <router-view></router-view>
</div>