Vue-Router参数传递

作用：点击路由跳转携带参数

方法一：通过动态路由传递参数，当前活跃路由页面获取参数通过(this.$route.params.动态参数)获取

// 1. index.js配置路由映射
{
  path: "/user/:userId",
  component: User
}

// 2. App.vue
// 2.1 router-link标签使用
<router-link :to="'/user/' + userId">link标签</router-link>

// 2.2 普通标签使用
<button @click="btnClick">btn</button>
// 传参
btnClick() {
  this.$router.push('/user/' + this.userId);
}

// 3. User.vue获取参数
this.$route.params.userId

方法二：通过query传递参数，当前活跃路由页面获取参数通过(this.$route.query.参数)获取

// 1. 使用router-link传递参数
//HTML
<router-link :to="{path: '/profile', query: {name: '孙悟空', age: 19, height: 1.88}}">
	通过router-link标签query传递
</router-link>

//获取参数
this.$route.query.name;
this.$route.query.age;

// 2. 使用普通标签传递参数
//HTML
<button @click="btnClick()">通过普通标签query传递</button>

//JS
btnClick() {
	this.$router.push({
		//配置路径
		path: "/profile",
		//配置参数
		query: {
			name: "孙悟空",
			age: 19,
			height: 1.88
		}
	})
}

//获取参数
this.$route.query.name;
this.$route.query.age;