深入Vue-Router路由嵌套理解


Posted in Javascript onAugust 13, 2018

背景

最近有个初学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组件

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

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
AngularJS与后端php的数据交互方法
Aug 13 #Javascript
Vue Promise的axios请求封装详解
Aug 13 #Javascript
Angular6封装http请求的步骤详解
Aug 13 #Javascript
解决angularjs中同步执行http请求的方法
Aug 13 #Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 #Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 #Javascript
angularjs $http调用接口的方式详解
Aug 13 #Javascript
You might like
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js切换光标示例代码
2013/10/10 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue中v-model对select的绑定操作
2020/08/31 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Django后台admin的使用详解
2019/07/08 Python
使用python去除图片白色像素的实例
2019/12/12 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
Ruby如何进行文件操作
2014/07/17 面试题
英文自荐信格式
2013/11/28 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers