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 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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 处理图片的类实现代码
2009/10/23 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
python实现三壶谜题的示例详解
2020/11/02 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
擅自离岗检讨书
2014/02/11 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL