【vue路由传参】vue自带方法路由传参方式、页面跳转带id过去、刷新页面数据不丢失、隐藏URL后的参数 详细教程
文章目录
- vue路由传参方式
- 一、页面刷新数据会丢失
- 方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数
- *该方法可以隐藏URL后的参数
- 方法二:使用Vue全局API:Vue.observable
- 二、页面刷新数据不会丢失
- 方法一:使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数
- 方法二:使用path匹配路由,通过query传参
vue路由传参方式
项目中很多情况下都需要进行路由之间的传值,想过很多种方式
sessionstorage/localstorage/cookie 进行离线缓存存储也可以,用vuex也可以,不过有些大材小用吧,不管怎么说因场景而异
一、页面刷新数据会丢失
使用场景:
页面跳转带id过去
方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数
通过路由属性中的name来确定匹配的路由,通过params来传递参数
eg:点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去
<div class="examine" @click="insurance(2)">查看详情</div>
// 父组件传值:将id带过去
methods:{
insurance(id) {
this.$router.push({
name: 'particulars',
params: {
id: id
}
})
}
// 路由配置
{
path: '/particulars',
name: 'particulars',
component: particulars
}
// 子组件:获取参数id
this.$route.params.id
温馨提示:该方法刷新页面数据会丢失
*该方法可以隐藏URL后的参数
方法二:使用Vue全局API:Vue.observable
使用Vue全局API:Vue.observable
详细教程看如下博客: Vue.observable使用教程
温馨提示:该方法刷新页面数据会丢失
二、页面刷新数据不会丢失
方法一:使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数
使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数
methods:{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
// 对应路由配置
{
path: '/particulars/:id',
name: 'particulars',
component: particulars
}
// 子组件中获取参数
this.$route.params.id
温馨提示:该方法刷新页面数据不会丢失
方法二:使用path匹配路由,通过query传参
使用path匹配路由,通过query传参
url路径中携带:
methods:{
insurance(id) {
this.$router.push({
path: '/particulars',
query: {
id: id
}
})
}
{
path: '/particulars',
name: 'particulars',
component: particulars
}
// 子组件获取参数
this.$route.query.id
温馨提示:该方法刷新页面数据不会丢失
even so: 感谢,解决了我一个大问题,卡俩小时了
黄昏不尽时: 还能拿源码吗?
知偶周: 调用的时候 show是会有报错的,
qq_28222917: 一页多个tab切,应该怎么控制active呢
special cloud: 全网最优解决方案!