深入Vue-Router路由嵌套理解

更新时间：2018年08月13日 09:40:36 作者：Tyler FE

这篇文章主要介绍了深入Vue-Router路由嵌套理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

背景

最近有个初学Vue的朋友问我，为什么我的两层路由跳不起来了，直接输url也不行？信息不是很充足及看不到源码的我，当时是那个一脸懵逼啊，心想这肯定是代码的问题，跟层级无关。接着我继续追问...(省略)...大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解

Vue-Router嵌套路由

首先假设项目中有两个路由Profile和Posts，按写法把他们定义为一层路由，是Root的子路由，因此Root中要有router-view组件去承载子路由，才能实现子路由切换展示

一层路由

Root容器

 <div>
  <h1>Root</h1>
  <!-- 承载子路由的容器 -->
  <router-view />
 </div>

一层路由写法

[
 {
  path: '/profile'
  component: profile // 组件引用 此处省略引用
 },
 {
  path: '/posts'
  component: posts // 组件引用 此处省略引用
 },
]

一层路由展示

Root的子路由展示是在Root中的，切换路由其实只是切换了router-view容器的内容

/profile               /posts
+------------------+         +-----------------+
| Root       |         | Root      |
| +--------------+ |         | +-------------+ |
| | Profile   | | +------------> | | Posts    | |
| |       | |         | |       | |
| +--------------+ |         | +-------------+ |
+------------------+         +-----------------+

二层路由

在上面的基础上，对profile加一层路由

profile容器

 <div>
  <h1>profile</h1>
  <!-- 承载profile子路由的容器 -->
  <router-view />
 </div>

profile子路由

[
 {
  path: '/profile'
  component: profile, // 此处不能少
  children: [
   {
    path: '/profile/list',
    component: profileList
   },
   {
    path: '/profile/item',
    component: profileItem
   }
  ]
 },
 ...
]

二层路由展示

和一层路由相同的是，Profile的子路由是在Profile容器中切换展示的，所以Profile路由的component是必不可少的

/profile/list             /profile/item
+------------------+         +-----------------+
| Root       |         | Root      |
| +--------------+ |         | +-------------+ |
| | Profile   | | +------------> | | Profile   | |
| | +----------+ | |         | | +---------+ | |
| | | list   | | |         | | | item  | | |
| | |     | | |         | | |     | | |
| | +----------+ | |         | | +---------+ | |
| +--------------+ |         | +-------------+ |
+------------------+         +-----------------+

路由嵌套总结

任何子路由都是在其父路由的组件中切换显示，不管是多少层的路由嵌套，都是这样的理解，所以父路由需要有以下两点，二者缺一不可

有组件引用
组件中有router-view组件

而我那个朋友就是父路由没有引用组件，导致子路由没有承载容器，自然而然就出现了他说的不起效的情况，这里把经验分享给大家，希望能对初学者有帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Monorepo风格的组件工程搭建示例详解
这篇文章主要介绍了Monorepo风格的组件工程搭建示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue自定义上传头像组件功能
这篇文章主要介绍了vue自定义上传头像组件功能,介绍了与一般上传组件的区别,通过实例代码介绍了上传图片组件的方法,需要的朋友可以参考下
2024-01-01
vue+element实现手机号验证码注册的示例
本文主要介绍了vue+element实现手机号验证码注册的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
el-table渲染慢卡顿问题最优解决方案
本文主要介绍了el-table渲染慢卡顿问题最优解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue响应式系统的原理详解
这篇文章主要为大家介绍了Vue响应式系统的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
vue中的按钮绑定事件小案例
这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
解决nuxt 自定义全局方法,全局属性,全局变量的问题
这篇文章主要介绍了解决nuxt 自定义全局方法,全局属性,全局变量的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue环境变量配置之process.env解读
这篇文章主要介绍了vue环境变量配置之process.env解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue中的reactive函数操作代码
这篇文章主要介绍了Vue中的reactive函数,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
Vue中动态Class实战示例
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11