微客导航 » 文章资讯 » Vue router传递参数并解决刷新页面参数丢失问题

Vue router传递参数并解决刷新页面参数丢失问题

2023-07-10 09:28:04 159

VueRouter传参方式：

1.this.$router.push({name:'模块名称',params:{//各参数}})

router.js：

exportdefaultnewRouter({
routes:[
{
path:'/paramsPassingByRouter',
component:ParamsPassingByRouter,
children:[
{
path:'paramsMode',
name:'paramsMode',
component:ParamsMode
}
]
}
]
})

ParamsPassingByRouter.vue：


params传参

ParamsMode.vue：


{{testData}}

效果：
url：http://localhost:8081/#/paramsPassingByRouter/paramsMode
页面显示：{"id":"20180101","name":"张三","aka":"z3","age":"18"}

但是刷新页面后，数据会丢失，显示：{}。

2.this.$router.push({name:'模块名称',query:{//各参数}})

router.js：

exportdefaultnewRouter({
routes:[
{
path:'/paramsPassingByRouter',
component:ParamsPassingByRouter,
children:[
{
path:'queryMode',
name:'queryMode',
component:QueryMode
}
]
}
]
})

ParamsPassingByRouter.vue：


query传参

QueryMode.vue：


{{testData}}

效果：
url：http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
页面显示：{"id":"20180101","name":"张三","aka":"z3","age":"18"}

刷新页面后，数据不会丢失。

解决刷新页面数据丢失的方案：

使用this.$router.push({name:'模块名称',query:{//各参数}})方式传参。

缺点：参数值都拼接在url上，url会很长，同时都可被看到。

this.$router.push({name:'模块名称',params:{//各参数}})路由文件设置的时候把参数拼到url里。

url：http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
缺点：同上。

1和2结合使用：this.$router.push({name:'模块名称',params:{//各参数},query:{//各参数}})。

老老实实的用localStorage存储。

url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以与params和query方式配合使用，可以暴露的参数显示在url上，同时刷新参数也不会丢失。
销毁页面的时候把localStorage存储的内容清除。

//router.js
{
path:'paramsMode/:aka',
name:'paramsMode',
component:ParamsMode
}

到此这篇关于Vuerouter传递参数并解决刷新页面参数丢失问题的文章就介绍到这了,更多相关Vuerouter传递参数丢失内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

Vue router传递参数并解决刷新页面参数丢失问题

热门推荐

随机推荐