位置: IT常识 - 正文
Vue--Router--嵌套路由(children)的用法(vue中$route)
编辑：rootadmin推荐整理分享Vue--Router--嵌套路由(children)的用法(vue中$route)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vuerouter嵌套路由怎么定义,vue router-view 嵌套 详细页,vuerouter嵌套路由怎么定义,vue router-view 嵌套 详细页,vuerouter嵌套子路的目的,vuerouter嵌套路由,vuerouter嵌套路由 为什么会导致页面缓存,vuerouter嵌套路由,内容如对您有帮助，希望把文章链接给更多的朋友！
原文网址：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
<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>登录页面（子页面）Login.vue
<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>注册页面（子页面）Register.vue
<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测试
上一篇：二十场数学建模竞赛【详细思路+代码】总结(数学建模 比赛)
下一篇：2023 年8个ChatGPT 的替代品(2023年会出什么车)
