路由跳转传参页面刷新数据丢失解决方案

通过Vue传递参数可以分为两种方式： params参数 query参数,params参数的具体过程如下所示：

• 基础

  <template>
  	<div @click="onClick">点击跳转</div>
  </template>
  

• 数据

  data(){
  	return{
  		id:12
  	}
  }
  
  

• 方法

  methods: {
      onClick(){
        this.$router.push({
           name: 'bindData',
           params:{
             id:this.id
           }
        })
      }
  }
  

• 接收参数

  mounted(){
  	this.data=this.$route.params;
  }
  

• 显示数据

  <a href="javascript:;">{{data.id}}</a>   //data是定义的变量
  

• 路由配置

  {
    path: '/bindData',
    name: 'bindData',
    component: BindData
  },
  

• 效果图
  

以上效果在刷新页面时数据会消失，要想页面刷新后不影响数据，有2中解决方案：本地存储数据和路由配置，后者的实现如下所示：

• 路由配置

  {
    path: '/bindData/:id',
     name: 'bindData',
     component: BindData
   },
  

• 效果图
  
  这样id会显示在地址栏中，页面刷新时数据还存在✌️✌️✌️✌️✌️✌️