深入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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue实现文字加密功能
Sep 27 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
Js+XML 操作
2006/09/20 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
Javascript事件实例详解
2013/11/06 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
python 快速排序代码
2009/11/23 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
小学优秀教师材料
2014/12/15 职场文书
初中中等生评语
2014/12/29 职场文书
趣味运动会赞词
2015/07/22 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis