vue动态路由配置及路由传参的方式


Posted in Javascript onMay 23, 2018

动态路由:

当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据

这就要用到动态路由跟路由传参了!

首先我们来了解下router-link这个组件:

简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到

并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路由配置中设置linkActiveClass属性,属性名就是样式css名,一般写为active

现在基本了解了router-link,先讲一下动态路由配置吧

我们在配置路由的时候,将目标组件的路径先配置好,如:

vue动态路由配置及路由传参的方式

比如多个路由都要进入List组件,这时候在配置路由路径后加个:id(id可随便取名,标识),这个属性id可以在$route.params.id中获取,例如:

vue动态路由配置及路由传参的方式

当前这个child组件要进入,以上配置的id就等于on;这时候在List组件中打印出$route.params.id就可以得到这个属性值on

vue动态路由配置及路由传参的方式

这个时候,不同组件进入同一目标组件时就可以得到标识跟备注了,也可以利用这个来传递一些正常的参数

接着往下看,带参数的路由,跟获取传来的参数值

当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj

传参数的时候,我们就写成对象的形式,用到v-bind的js表达式

vue动态路由配置及路由传参的方式

此时整个的理解可以为:我是child组件过来的,而且我还带来了我的名字,我叫child

在List组件当中去获取这个参数值跟id的值

vue动态路由配置及路由传参的方式

vue动态路由配置及路由传参的方式

如果是不同的组件过来的,可以设置不同的id值,只要在目标组件获取属性id的值就可以了,参数就利用query.属性值来获取。

总结

以上所述是小编给大家介绍的vue动态路由配置及路由传参的方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
详解javascript replace高级用法
Feb 17 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 #Javascript
深入剖析Node.js cluster模块
May 23 #Javascript
Node.js进阶之核心模块https入门
May 23 #Javascript
使用 vue-i18n 切换中英文效果
May 23 #Javascript
centos 上快速搭建ghost博客方法分享
May 23 #Javascript
20个最常见的jQuery面试问题及答案
May 23 #jQuery
AngularJS与BootStrap模仿百度分页的示例代码
May 23 #Javascript
You might like
PHP 创建标签云函数代码
2010/05/26 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
浅析Python基础-流程控制
2016/03/18 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python 二维数组90度旋转的方法
2019/01/28 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python打包成so文件过程解析
2019/09/28 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
后备干部培训方案
2014/05/22 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
结婚老公保证书
2015/02/26 职场文书
涨价通知怎么写
2015/04/23 职场文书
2016教师国培研修感言
2015/12/08 职场文书