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 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
js中this用法实例详解
May 05 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
深入理解PHP中的Session和Cookie
2013/06/21 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
js常见遍历操作小结
2019/06/06 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
virtualenv介绍及简明教程
2020/06/23 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
怎样声明接口
2014/09/19 面试题
统计每一学生的平均成绩
2014/06/06 面试题
房地产出纳岗位职责
2013/12/01 职场文书
大学生学业生涯规划
2014/01/05 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
读书活动总结范文
2014/04/26 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
高一军训口号
2015/12/25 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android