Vue.js - 路由 vue-router 的使用详解10（嵌套路由、二级路由）

2018-09-04 发布：hangge 阅读：1798

在一个项目中可以嵌套使用多个 <router-view> 组件，这种情况就需要用到嵌套路由。下面以一个使用二级路由的样例进行演示，更多层级的路由实现原理是一样的。

1，样例代码

（1）App.vue

页面中有一个 <router-view> 组件用来渲染显示一级路由的页面组件。
同时 <router-view> 组件上方有四个链接（后两个为嵌套路由，其中 hangge 为参数），点击后进行页面的切换。

<template>
  <div id="app">
    <p>
      <router-link to="/" tag="li">/</router-link>
      <router-link to="/user/hangge" tag="li">/user/hangge</router-link>
      <router-link to="/user/hangge/profile" tag="li">/user/hangge/profile</router-link>
      <router-link to="/user/hangge/posts" tag="li">/user/hangge/posts</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

（2）router/index.js

路由配置文件中通过 children 属性配置子路由。
为方便演示这里我的页面组件直接通过 template 定义，没有创建单独的 vue 文件。
特别注意 User 这个页面组件，它的内部又包含了一个 <router-view> 组件，用于渲染显示二级路由的页面组件。

import Vue from 'vue'
import Router from 'vue-router'

//Vue全局使用Router
Vue.use(Router)

//首页模块
const Index = {
  template: `
    <div class="user">
      <h2>欢迎访问 hangge.com</h2>
    </div>
  `
}

//用户模块
const User = {
  template: `
    <div class="user">
      <h2>你好：{{ $route.params.userName }}</h2>
      <router-view></router-view>
    </div>
  `
}

//用户模块下的子模块
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/user/:userName',
      name: 'user',
      component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

2，运行效果

（1）点击前面两个链接可以进行一级路由的跳转。

（2）而点击后面两个链接可以进行二级路由的跳转。