Vue Router嵌套路由(children)的用法小结

更新时间：2022年08月12日 09:41:26 作者：IT利刃出鞘

嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，这篇文章主要介绍了Vue--Router--嵌套路由(children)的用法,需要的朋友可以参考下

简介

说明

本文介绍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

<template>
  <div class="outer">
    <h2>这是用户页面</h2>
    <router-link :to="{name: 'Login'}">登录</router-link> |
    <router-link :to="{name: 'Register'}">注册</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'User'
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

登录页面（子页面）

<template>
  <div class="outer">
    <h3>这是登录页面</h3>
  </div>
</template>
 
<script>
export default {
  name: 'Login'
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

注册页面（子页面）

<template>
  <div class="outer">
    <h3>这是注册页面</h3>
  </div>
</template>
 
<script>
export default {
  name: 'Register'
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

测试

访问：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

测试

到此这篇关于VueRouter嵌套路由(children)的用法的文章就介绍到这了,更多相关VueRouter嵌套路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue ElementUI this.$confirm async await封
这篇文章主要介绍了Vue ElementUI this.$confirm async await封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue实现PDF文件预览的方法详解
pdf文件预览是开发业务时常见的一个交互,在toB项目中是经常用到的,对于用户上传文件,预览文件等操作时有一个更好的体验,下面我结合实际业务,在vue的基础上与大家分享这个实现方法,需要的朋友可以参考下
2023-09-09
Vue实现日历小插件
这篇文章主要为大家详细介绍了Vue实现日历小插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
VUE+Java实现评论回复功能
这篇文章主要为大家详细介绍了VUE+Java实现评论回复功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue设置提示和警告弹出框实战案例
页面中会有很多时候需要弹窗提示,下面这篇文章主要给大家介绍了关于Vue设置提示和警告弹出框的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-02-02
Vue3中watchEffect高级侦听器的具体使用
Vue3中新增了一种特殊的监听器watchEffect,本文主要介绍了Vue3中watchEffect高级侦听器的具体使用,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
基于element日历组件实现签卡记录
这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
Vue按回车键进行搜索的实现方式
这篇文章主要介绍了Vue按回车键进行搜索的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue 解决通过this.$refs来获取DOM或者组件报错问题
这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
前端文件导出设置responseType为blob时遇到的问题及解决
这篇文章主要给大家介绍了关于前端文件导出设置responseType为blob时遇到的问题及解决方法,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09