VUE两种带参跳转页面的区别

第一种：query传参

query带参跳转相当于是get提交，跳转页面后参数会显示在导航栏中。

//跳转
this.$router.push({
					path:'/page',
                    query:{name1:'1',name2:'2'}
				   });
//接收
var name1 = this.$route.query.name1;
var name2 = this.$route.query.name2;

//router.js里面
const routes = [{
		path: '/page',
		name: '/page',
		component: () => import('../components/Page.vue')
	}
]

第二种：params传参

params传参相当于是post提交，传递的参数不会显示在导航栏，但跳转页面后刷新页面的话，参数会丢失，而query传参则不会。

//跳转
this.$router.push({
					name:'/page',
                    params:{name1:'1',name2:'2'}
				   });
//接收
var name1 = this.$route.params.name1;
var name2 = this.$route.params.name2;

//router.js里面
const routes = [{
		path: '/page',
		name: '/page',
		component: () => import('../components/Page.vue')
	}
]