vue页面跳转带参数以及刷新参数消失

路由
router/index.js

  {
    path: "/demo",
    name: "test",
    component: () =>
      import("../views/Demo.vue"),
  },

测试A.vue

<template>
  <div class="container">
	<div @click="goTo(1)">1页面</div>
	<div @click="goTo(2)">2页面</div>
  </div>
</template>

点击事件后获取事件里面的值，然后跳转指定name为’test’的路由页面

export default{
	data(){
		return{
			
		}
	},
	methods:{
		goTo(i){
			let id = i;
			this.$router.push({ name: 'test', params: { id: id }})
		}
	}
}

接受测试B.vue

<template>
	<div>
		<el-button type="warning" class="go-back" @click="goBack">返回</el-button>
	</div>
</template>

import router from '@/router';
export default {
	data() {
		return {
			id: "",
		}
	},
	created() {
		this.id = this.$route.params.id;
		console.log(this.id)

		this.list()
	},
	methods:{
		list(){
			console.log('数据列表...')
		},
		goBack(){
			router.go(-1);
		}
	}
}

点击1页面和2页面都可以跳转以及demo页面可以获取跳转后的参数

如果在demo页面刷新后就获取不到参数了

解决跳转页面后刷新参数消失问题

goTo(i){
	let id = i;
			
	this.$router.push({
		 path: "/demo",
		query: {
			a: JSON.stringify({id:id}),
			b: 2
		}
	})
}

<template>
	<div>
		<el-button type="warning" class="go-back" @click="goBack">返回</el-button>
	</div>
</template>

import router from '@/router';
export default {
	data() {
		return {
			id: "",
			row:{}
		}
	},
	created() {
		
		this.list()
	},
	beforeRouteEnter(to, from, next) {
	
	  next(vm => {
		console.log(to)
		console.log(to.query.a)
	    vm.row = JSON.parse(to.query.a)
	    vm.list()
	    next()
	  })
	},
	methods:{
		list(){
			console.log('数据列表...')
		},
		goBack(){
			// 销毁地址栏参数
			this.$router.replace({ query: {} });
			// 返回上一个路由,并会自动销毁实例
			
			router.go(-1);
		}
	}
}

// 返回上一个路由,并会自动销毁实例
// this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1);