讲解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 相关文章推荐
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
node.js入门教程
Jun 01 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
js实现常用排序算法
Aug 09 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
js实现鼠标拖曳效果
Dec 30 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP新手上路(八)
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
vue el-table实现行内编辑功能
2019/12/11 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python post请求实现代码实例
2020/02/28 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
工商管理应届生求职信
2013/10/07 职场文书
入党申请自荐书范文
2014/02/11 职场文书
工程承包协议书范本
2014/09/29 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js