讲解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实现二分查找法实现代码
Nov 12 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 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巧获服务器端信息
2006/12/06 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php explode函数实例代码
2012/02/27 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python 多线程串行和并行的实例
2019/02/22 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
什么是python的id函数
2020/06/11 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
行政主管岗位职责
2013/11/18 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
争先创优个人总结
2015/03/04 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL