vue动态路由配置,vue路由传参
动态路由:
当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据
这就要用到动态路由跟路由传参了!
首先我们来了解下router-link这个组件:
简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以在浏览器端查看到
并且,当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路由配置中设置linkActiveClass属性,属性名就是样式css名,一般写为active
现在基本了解了router-link,先讲一下动态路由配置吧
我们在配置路由的时候,将目标组件的路径先配置好,如:

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

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

这个时候,不同组件进入同一目标组件时就可以得到标识跟备注了,也可以利用这个来传递一些正常的参数
接着往下看,带参数的路由,跟获取传来的参数值
当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj
传参数的时候,我们就写成对象的形式,用到v-bind的js表达式

此时整个的理解可以为:我是child组件过来的,而且我还带来了我的名字,我叫child
在List组件当中去获取这个参数值跟id的值


如果是不同的组件过来的,可以设置不同的id值,只要在目标组件获取属性id的值就可以了,参数就利用query.属性值来获取
vue动态路由配置,vue路由传参的更多相关文章
- vue 动态组件、父子组件传参
1.vue中的自定义属性并获得属性的值 自定义属性::data-id语法为 :data-属性 获取属性的值:ev.target.dataset.id 2.vue父子组件传值 3.动态组件使用
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue 路由跳转,传参
一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
- Vue Router的params和query传参的使用和区别
vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue打开新窗口并且实现传参,有图有真相
我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过 ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
随机推荐
- Compute Shader
[Compute Shader] 1.Similar to regular shaders, compute shaders are Asset files in your project, with ...
- response.sendfile() fails with Error: Forbidden
[response.sendfile() fails with Error: Forbidden] 参考:https://github.com/expressjs/express/issues/146 ...
- 使用in ()进行批量删除
public bool DeleteList(string idlist ) { StringBuilder strSql=new StringBuilder(); strSql.Append(&qu ...
- sqlserver存储过程中调用存储过程
declare @value1 varchar(100)declare @value2 int exec xx.dbo.xxxxx 'param1', 'param2', 'param3', @val ...
- dbcp第一次获取连接的时间问题
最近优化代码,发现第一次调用数据库连接时非常慢,往后便不再发生.经了解,数据库连接是用dbcp管理的,想在网上查找答案,但没有找到.在某人的提醒下决定研究源代码: 部分源代码如下(BasicDataS ...
- bulk
bulk - 必应词典 美[bʌlk]英[bʌlk] n.大部分:主体:(大)体积:大(量) v.扩展:增大:堆积起来:形成大块 网络散装:大批:大量 变形复数:bulks:现在分词:bulking: ...
- Java自学之路(小白向)
首先学习一门语言无非就受教与自学两种方式,本博文针对自学(穷逼没钱报班,大学又不是计算机专业,只能自学啊) 开个玩笑,其实有很多人是适合自学的,下面介绍. 一.要充满自信我自己就可以学好(够面试用的入 ...
- 微信小程序快速移植支付宝小程序
移植背景: 1. 支付宝小程序开发文档只了解了大致框架,跑了demo,具体Api.组件没太多了解: 2. 已有微信小程序,移植支付宝小程序做预研(主要针对授权登录.支付等功能). 3. 移植的微信小程 ...
- Linux 下 mysql的基本配置
Linux 下 mysql的基本配置 2013年02月27日 ⁄ MySQL ⁄ 共 3000字 ⁄ 暂无评论 ⁄ 被围观 2,483 views+ 1. Linux mysql安装: $ yu ...
- swift -2018 - 创建PCH文件
第一种:简单方式 在swift文件 创建一个OC文件 1> command + n 2> 3> 此时 你会发现有提示 让你创建桥接文件 4>删除 OC文件 5> 直接复制 ...