路由传参说有几种方式

看了很多篇博客，路由传参说有几种方式的都有，看得我都晕了，都不知道到底有几种了，因为很多博客分析的角度不同，所以把我搞得有点乱，最后还是通过实践来搞清楚了，其实本身就是那么几种形式，但方式其实就两种query和params，下面分别就这两个方式来说：

一、params
params有三种传参形式
1、router-link形式传参【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'

//传递方式，在path后面跟上对应的值
<router-link :to="`/path/${id}`"><router-link>

//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值
1
2
3
4
5
6
7
8
9
10
11
2、编程式导航形式传参，通过path匹配路由【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'

//传递方式，通过path匹配路由，且在path后面跟上对应的值
this.$router.push({
path: `/path/${id}`
})

//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值

3、编程式导航形式传参，通过name匹配路由【不在路径中显示参数，刷新页面参数丢失】

//传递方式,通过name匹配路由
this.$router.push({
name: "name", //路由配置中的name
params:{
id:222
}
});

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数丢失
/path

二、query
query有三种传参形式
1、router-link形式传参【在路径中？后面显示参数，刷新页面参数不丢失】

//传递方式
<router-link :to="{path:'/path',query:{id:'123'}}"><router-link>
//或者
<router-link :to="/path?id=123"><router-link>

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

2、编程式导航形式传参，通过path匹配路由【在路径中？后面显示参数，刷新页面参数不丢失】

//传递方式，通过path匹配路由
this.$router.push({
path:'/path',
query: {
id:'123'
}
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

3、编程式导航形式传参，通过name匹配路由【在路径中？后面显示参数，刷新页面参数不丢失】

//传递方式，通过name匹配路由
this.$router.push({
name:'name',//路由配置中的name
query: {
id:'123'
}
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

总结：query和params分别都有三种形式可以传参：

router-link形式
通过path匹配路由的编程式导航形式
通过name匹配路由的编程式导航形式
而这其中只有params方式的通过name匹配路由的编程式导航形式不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）

路由传参说有几种方式相关推荐

vue路由传参到底有几种方式
看了很多篇博客,路由传参说有几种方式的都有,看得我都晕了,都不知道到底有几种了,因为很多博客分析的角度不同,所以把我搞得有点乱,最后还是通过实践来搞清楚了,其实本身就是那么几种形式,但方式其实就两种q ...
Vue如何进行路由传参
Vue路由传参 params参数 router-link形式传参编程式路由导航传参 query参数 router-link形式传参编程式路由导航传参 params和query的区别 Vue路由传参 ...
angular路由传递参数_详解Angular5 路由传参的3种方法
本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product? ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...

路由传参说有几种方式

路由传参说有几种方式相关推荐

最新文章

热门文章