嵌套路由

这里通过案例的形式演示嵌套路由，首先创建 3 个组件，即 user 组件、login 组件和 register 组件，其中 user 组件下面又包含登录组件和注册组件。

代码流程如下。

创建 3 个组件。
创建用户组件路由匹配规则。
显示用户组件。
把登录和注册组件写入用户组件。
创建登录组件和用户组件的匹配规则，具体代码如下。

视图层代码如下。

<div id="app" v-cloak>
  <router-link to="/user">用户</router-link>
  <router-view></router-view>
</div>

<template id="temp">
  <div>
    <h1>用户</h1>
    <router-link to="/user/login">登录</router-link>
    <router-link to="/user/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  var user = {
    template: '#temp'
  }
  var login = {
    template: '<div><h1>登录</h1></div>'
  }
  var register = {
    template: '<div><h1>注册</h1></div>'
  }
  var router = new VueRouter({
    routes: [{
      path: '/user',
      component: user,
      children: [{
          path: 'login',
          component: login
        },
        {
          path: 'register',
          component: register
        },
      ]
    }]
  })
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {},
    router: router
  })
</script>

代码解析如下。

请大家按照注释顺序理解代码，这里重点要强调的是嵌套路由的匹配规则，因为登录组件和注册组件都在 user 用户组件下面，所以在用户组件下面新增 children 属性，表示子组件的路由匹配规则。

视图层中，登录组件和注册组件需要在用户组件中显示，想要显示在用户组件中的什么位置，就在相应位置添加 router-view 标签即可。