vue中使用params传参，刷新页面后params参数丢失解决方案

if时光重来

已于 2022-08-05 09:21:11 修改

阅读量9.5k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-21 16:23:44 首次发布

本文链接：https://blog.csdn.net/admin_web/article/details/125914612

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

解决方案：

配合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>