vue-router实现嵌套路由的讲解


Posted in Javascript onJanuary 19, 2019

一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由)

需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的

嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现;子路由的内容进行切换,地址栏的路径也随之改变。

// 嵌套路由
  {
   path: '/nest',
   component: () => import('@/nest/nest'),
   // 嵌套路由的关键字children,在父路由中添加children数组 中添加子路径
   children:[
    {
     // 要注意,以 / 开头的嵌套路径会被当作根路径,这让你充分的使用嵌套组件而无须设置嵌套的路径。如果这里的path的值为'/son1将无法渲染son1子组件'
     path: 'son1',
     component: () => import('@/nest/nest_son1')
    },
   ]
  }

上面子路由中加不加‘/' 的区别:当去到son1的时候加 ‘/'会在地址栏中显示  #/son1;不加 ‘/'的时候回在地址栏中显示 #/nest/son1

注意:/xx就是根路径

vue-router实现嵌套路由的讲解

vue-router实现嵌套路由的讲解

vue-router实现嵌套路由的讲解

vue-router实现嵌套路由的讲解

效果:

vue-router实现嵌套路由的讲解

vue-router实现嵌套路由的讲解

vue-router实现嵌套路由的讲解

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue-router实现编程式导航的代码实例
Jan 19 #Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 #Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 #Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 #Javascript
vue-router命名视图的使用讲解
Jan 19 #Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 #Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python 如何在字符串中插入变量
2020/08/01 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
拓展培训心得体会
2014/01/04 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
增员口号大全
2014/06/18 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python