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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
JavaScript设计模式初探
Jan 07 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
微信小程序实现刷脸登录
May 25 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
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
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php的扩展写法总结
2019/05/14 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
Python程序设计入门(4)模块和包
2014/06/16 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers