Vue如何进行路由传参

Vue路由传参

params参数
- router-link形式传参
- 编程式路由导航传参
query参数
- router-link形式传参
- 编程式路由导航传参
params和query的区别

Vue路由传参主要有两种方式

params参数

浏览器地址栏中显示参数和不显示参数两种情况主要就是看路由配置。如果配置路由格式：/router/:id，则显示；如果配置的路由格式：/router，则不显示
传递的方式：在path后面跟上对应的值

router-link形式传参

to的字符串写法

//在路径中会显示参数，刷新页面参数不会丢失。
//配置路由
{path: '/user/:id',component: User,
},//路由传参， 跳转并携带params参数，to的字符串写法
<router-link :to="`/user/${id}`" ></router-link>  //获取路由参数$route.params.id

to的对象写法
路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

在路径中会显示参数，刷新页面参数不会丢失。
//配置路由
{name:'user',path: '/user/:id',//使用占位符声明接收params参数component: User,
},//路由传参， 跳转并携带params参数，to的对象写法
<router-link :to="{name:'user', params:{id:666}}">跳转</router-link>  //获取路由参数$route.params.id

编程式路由导航传参

通过path匹配路由

如果使用params传参,且参数是以对象的形式，跳转路径只能使用name形式而不能用path。

//在路径中会显示参数，刷新页面参数不会丢失。
//配置路由
{path: '/user/:id',component: User,
},
//路由传参
this.$router.push({path: `/user/${id}`})
// 注意这种写法的params不生效!!
this.$router.push({ path: '/user', params: {id}})    // -> /user//获取参数
$route.params.id

通过name匹配路由

//注意！！此时未在路由配置:id，不在路径中显示参数刷新页面参数会丢失
//路由传参
this.$router.push({name:'user',params:{id:666}})//获取参数
$route.params.id

query参数

配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/route?id=123

router-link形式传参

刷新页面参数不会丢失

通过路径path匹配路由

//路由传参//to的字符串写法
<router-link :to="/user?id=666"><router-link>
//to的对象写法
<router-link :to="{path:'/user',query:{id:'666'}}"><router-link>//获取参数
$route.query.id

通过name匹配路由

//路由传参
<router-link :to="{name: 'user', query: {id:'666'}}">按钮</router-link>//获取参数
$route.query.id

编程式路由导航传参

刷新页面参数不会丢失

通过path匹配路由

//路由传参 字符串形式
this.$router.push('/user?id=666')
//或者对象形式
this.$router.push({path:'/user',query: {id:'666'}})//获取参数
$route.query.id

通过name匹配路由

//路由传参
this.$router.push({name:'user',query: {id:'666'}})//获取参数
$route.query.id

params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.id 和 this.$route.params.id 。

url地址显示：query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意：query刷新不会丢失query里面的数据，params刷新会丢失 params里面的数据。

本文中部分类容参考：https://blog.csdn.net/m0_37843876/article/details/108196266

Vue如何进行路由传参相关推荐

vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
Vue路由传参及传参后刷新导致参数消失处理
参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第 ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...

Vue如何进行路由传参

Vue路由传参

params参数

router-link形式传参

编程式路由导航传参

query参数

router-link形式传参

编程式路由导航传参

params和query的区别

Vue如何进行路由传参相关推荐

最新文章

热门文章