vue-router实现嵌套路由的讲解
更新时间：2019年01月19日 15:40:16 作者：muzidigbig
今天小编就为大家分享一篇关于vue-router实现嵌套路由的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
一、嵌套路由（配置好父路由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就是根路径
效果：
若有不足请多多指教！希望给您带来帮助!
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
相关文章
本文主要介绍了el-tree树组件懒加载(后端上千条数据前端进行处理)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了vue 路由视图 router-view嵌套跳转，主要实现的内容有制作一个登录页面，跳转到首页，首页包含菜单栏、顶部导航栏、主体，标准的后台网页格式，菜单点击显示不同的页面，感兴趣的小伙伴请参考下面文章内容2021-09-09
这篇文章主要为大家介绍了vue中destroyed方法及使用示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本篇主要介绍了Vue导出json数据到Excel电子表格的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
因为安装原型图设计实现页面,在element自带的图标库好像没有,所以按钮的图标icon需要自定义,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的两种解决方式,需要的朋友可以参考下2022-07-07
vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue中对数组的元素进行删除,以前一直以为这个方法是vue中特有的,后来百度之后才知道原来是js的一个写法,下面这篇文章主要给大家介绍了关于Vue中splice()方法对数组进行增删改等操作的实现方法,需要的朋友可以参考下2023-05-05
本篇文章主要介绍了Vue过滤器的用法和自定义过滤器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
对于浏览器来说,文本、图片等可以直接打开的文件,不会进行自动下载,下面这篇文章主要给大家介绍了关于Vue实现下载文件而非浏览器直接打开的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
我们通常会用到脚手架vuecli创建项目,此时需要安装脚手架,下面这篇文章主要给大家介绍了关于vue脚手架安装以及安装失败问题的解决办法,需要的朋友可以参考下2022-07-07
最新评论