vue中使用params传参,刷新页面后params参数丢失解决方案
vue中使用params传参,刷新页面后params参数丢失解决方案。
·
解决方案:
- 配合sessionStorage实现刷新页面后数据不丢失
(网上很多都是使用localStorage配合使用,但是有个问题是将当前页面直接关闭了,重新进来后localStorage还是存在的。而使用sessionStorage,页面关闭后会自动删除)
export default {
created(){
var paramsData = sessionStorage.getItem("paramsData");
if(paramsData){
var params = JSON.parse(sessionStorage.getItem("paramsData"));
}else{
var params = this.$route.params;
sessionStorage.setItem("paramsData", JSON.stringify(params));
}
this.params = params;
},
// 页面销毁之前
beforeDestroy() {
sessionStorage.removeItem('paramsData')
},
}
- 使用动态路由
使用动态路由,访问路由地址为:/vuew1/username/6110(感觉和query访问差不多,如果参数多点路由地址会显得很长,不大美观。)
在router.js中设置路由
const routes = [
{
path: '/view1/:name/:idno',
name: 'view1',
component: () => import( '../admin/view1.vue')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
页面中使用
this.$router.push({name:'view1', params:{name:'张三', idno:'123123'}});
<router-link :to="{name:'view1', params: {name:'张三', idno:'123123'}}">跳转</router-link>
更多推荐
已为社区贡献10条内容
所有评论(0)