原文网址：Vue–Router–嵌套路由(children)的用法_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍Vue Router的嵌套路由的用法。

嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套。（router-view必须要有，否则点击了router-link后，路径会变化，但页面不改变）。

使用场景

嵌套路由用于实现页中页效果。例如：

• 用户页面中，有登录页面和注册页面，这两个页面通过标签切换。
  • 此时：用户页面是父路由，登录和注册页面是子路由
• 后台管理页面中，布局都是同一套，只是中间的内容部分改变。（例如：vue-element-admin）
  • 此时：整个布局是父路由，中间的内容页面是子路由。

官网网址

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

示例

需求：写一个用户页面，里边有登录页面和注册页面，这两个页面通过标签切换。

路由配置

router/index.js

import Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'Home',    redirect: User  },  {    path: '/user',    name: 'User',    component: User,    children: [      {        path: 'login',        name: 'Login',        component: Login      },      {        path: 'register',        name: 'Register',        component: Register      }    ]  }]const router = new VueRouter({  routes})export default router

用户页面（父页面）

User.vue

      
这是用户页面
    登录 |    注册      export default {  name: 'User'}.outer {  margin: 20px;  border: 2px solid red;  padding: 20px;}

登录页面（子页面）

Login.vue

      
这是登录页面
  export default {  name: 'Login'}.outer {  margin: 20px;  border: 2px solid blue;  padding: 20px;}

注册页面（子页面）

Register.vue

      
这是注册页面
  export default {  name: 'Register'}.outer {  margin: 20px;  border: 2px solid blue;  padding: 20px;}

测试

访问：http://192.168.0.104:8080/

结果：

点击“登录”/“注册”：

子路由的path前加“/”

如果子路由的path的最前边有“/”，则不需要加父路由的路径即可访问此子组件。

例如，修改上边的“路由配置”，将path: ‘login’，改为path: ‘/login’，则登录页面可以这样访问：

http://192.168.0.104:8080/#/login

示例

router/index.js：

import Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'Home',    redirect: User  },  {    path: '/user',    name: 'User',    component: User,    children: [      {        path: '/login',        name: 'Login',        component: Login      },      {        path: 'register',        name: 'Register',        component: Register      }    ]  }]const router = new VueRouter({  routes})export default router

测试