vue-router 路由传参
vue-router传递参数分为两大类:
编程式的导航 router.push
声明式的导航 <router-link>
声明式的导航 路由导航
字符串
<router-link to="/detail">详情</router-link>
此方式实现路由跳转,不携带参数。
对象
传递参数主要是以对象的形式,有 命名路由
和 查询参数
。
对应路由配置如下:
{path: '/detail',name: 'Detail',component: () => import('./Detail.vue')
}
命名路由
<router-link :to="{ name: 'Detail', params: { id: 1111}}">click to detail page</router-link>
此方法页面刷新路由传递参数会消失。
查询参数
<router-link :to="{ path: '/detail', query: { id: 1111}}">click to detail page</router-link>
此方法页面刷新路由传递参数不会消失,传递参数会跟在路由地址后面。
编程式的导航 router.push
编程式导航传递参数有两种类型:字符串、对象。
字符串
字符串方式是直接将路由地址以字符串的方式来跳转,这种方式不能传递覅参数。
例子:
this.$router.push("detail");
对象
传递参数主要是以对象的形式,有 命名路由
和 查询参数
。
命名路由
命名路由传递参数使用params来传递。
实例:
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({name: 'Detail',params: {id: id}
})
对应路由配置: 这里可以添加:/id 也可以不添加,添加/:id数据会在url后面显示,不添加数据就不会显示。
{path: '/detail',// 一定要写name,params必须用name来识别路径name: 'Detail',component: () => import('./Detail.vue')}
子组件中: 这样来获取参数
this.$route.params.id
用params
传参,F5强制刷新页面参数数据会被清空。
查询参数 $router.push实现路由传参
查询参数是在路由地址后面带上参数,传递参数使用query
,路由地址使用path
来传递,目标页面接收传递的参数使用query
。
实例:
父组件:使用 path
来匹配路由,然后子组件通过query
来传递参数
这种情况下 query
传递的参数会显示在 url
后面 ?id=?
。
例如:https://xxx.com.cn/#/detail?id=73080
this.$router.push({path: '/detail',query: {id: id}})
对应路由配置:
{path: '/detail',name: 'Detail',component: () => import('./Detail.vue')
}
对应子组件获取参数:
// 获取参数
this.$route.query.id
使用这种方式实现,刷新页面传递的参数不会消失。
也可以是以下这种,直接调用$router.push 实现携带参数的跳转:
//直接调用$router.push 实现携带参数的跳转
this.$router.push({path: `/detail/${id}`,
})
对应路由配置如下:
{path: '/detail/:id',name: 'Detail',component: () => import('./Detail.vue')
}
这种方式,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id
此方法页面刷新数据不会丢失。
当然,个人感觉这种方式会比较麻烦,需要在跳转地方确定传递参数,还要去对应路由配置那里写一下传递参数。
总结
总的来说,万变不离其宗,vue-router 路由传参归为以下三大类:
一、用uter-link>标签来传递参数
二、用$router.push实现路由传参,通过query来传递参数
三、通过路由属性中的name匹配路由,再根据params传递参数
tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空。(为了避坑,传参强烈建议使用string类型)
vue-router 路由传参相关推荐
- 【Vue】路由传参方式
在使用params传递参数时,需要使用name来指定目标,否则会出现数据传输失败 vue的路由传参共有三种方式 1.query传参:不管使用path还是name来匹配路由都可以,然后通过query来传 ...
- Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
- react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
- Vue:路由传参的三种方式
文章目录 前言 方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
- vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
- router路由传参 - props
使用props路由传参 路由传参 - props 什么是代码的耦合? 路由代码传参 模板代码传参 布尔模式 对象模式 函数模式 路由传参 - props 使用props可以降低耦合度,取代$route ...
- CryptoJS实现vue项目路由传参AES加密
安装: npm i crypto-js 封装方法: import CryptoJS from 'crypto-js/crypto-js';const KEY = CryptoJS.enc.Utf8.p ...
- vue中路由传参方式之二(this.$router.push进行编程式路由跳转传参)
this.$router.push进行编程式路由跳转传参 router中路由配置 组件home点击传参 组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
- Vue 中路由传参(动态路由匹配)
一.解释 把数据从一个路由页面传递到另外一个页面的技术 这里列举了 params 和 query 的传参方式 二.案例 案例展示 手机列表页 传参到 手机详情页面(传递的是id) ① params ...
- vue动态路由传参的几种方式
最新文章
- Java垃圾回收总结
- juniper接口打环测试
- js函数重写php,深入讲解js覆盖原有方法 提供重写方法
- linux多网口dhcp服务绑定,Linux系统实现多网段DHCP服务器配置
- linq、lambda、entity framework之间的关系
- Flutter 饼状图、柱状图、拆线图、Flutter动态饼图、Flutter图表 flutter_echart 开发文档
- 剑指offer (01):赋值运算符函数 (C++ 实现)
- 工作七年,从实习生到测试主管,我认识到倾听对一个人有多重要!
- bzoj 1606 [Usaco2008 Dec]Hay For Sale 购买干草(01背包)
- 数组元素的填充与替换、排序和复制
- clearcase 操作指南
- 用“企业架构”方法指导信息化规划
- 左程云 Java 笔记--暴力递归--动态规划
- 前端工程师如何提升能力 提高效率有哪些方法
- html新浪短域名api,新浪(t.cn)短网址API-API文档-免费api接口-短网址工具
- 这个行业一半人月薪超过8千!
- Swing MVC设计模式
- 计算机应用专业可以考哪些证,计算机应用技术专业学生需要考取哪些证书?
- 【JAVA 学习基础】java内存区域 探究
- 利用招行香港一卡通和美国Scottrade开设港股和美股的攻略