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操作ajax返回的json的注意问题!
Feb 23 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS实现拼图游戏
Jan 29 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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/10 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
原生js实现轮播图
2017/02/27 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
vue获取当前激活路由的方法
2018/03/17 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python中__call__内置函数用法实例
2015/06/04 Python
Python多线程和队列操作实例
2015/06/21 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
工程师岗位职责规定
2014/02/26 职场文书
百年校庆节目主持词
2014/03/27 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
优秀班组申报材料
2014/12/25 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android