讲解vue-router之什么是嵌套路由


Posted in Javascript onMay 28, 2018

上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。

GitHub:https://github.com/Ewall1106/mall

1.嵌套路由的使用场景是什么呢?

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。

2.具体是怎么实现的?

① 为了演示,我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容

讲解vue-router之什么是嵌套路由

title1.vue

讲解vue-router之什么是嵌套路由

title2.vue

② 现在我们在router index.js 中将这上面两个新建的组件引入进来并填写路径,这里的Title1Title2是作为test.vue页面的子路由,所以要写在children属性下

讲解vue-router之什么是嵌套路由

路由配置

这里需要提个醒的就是填写children子路由的path不要加/

③ 然后我们再去到test.vue中敲:

在这里提个醒,在to后面写路由路径的时候,一定到带上绝对路径,也就是要把test这个父路由路径写进去"/test/title1"

讲解vue-router之什么是嵌套路由

test.vue

④ 最后我们进入浏览器点击不同的标题就可以看到不同内容的展示

讲解vue-router之什么是嵌套路由

localhost

讲解vue-router之什么是嵌套路由

点击标题

参考学习
https://router.vuejs.org/zh-cn/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Vue表单控件绑定图文详解
Feb 11 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
微信小程序上传图片实例
May 28 #Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 #Javascript
微信小程序实现上传图片功能
May 28 #Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 #Javascript
vue-cli构建项目下使用微信分享功能
May 28 #Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
You might like
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
语义化 H1 标签
2008/01/14 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
使用Python写一个小游戏
2018/04/02 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
Ejb技术面试题
2015/04/29 面试题
爽歪歪广告词
2014/03/20 职场文书
惊天动地观后感
2015/06/10 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS