Vue——路由传参的两种方法（声明式导航）

声明式导航-命名路由传参

第一种 name+params

发送方：

	<router-link :to="{
		name:'TestPage',
		params:{
			msgKeyOne:'valueOne',
		}
	}">跳转测试页面</router-link>

接收方：

<h1>这是测试页面</h1>
<h2>{{msg1}}</h2>

-------------------------------------------------------------------------------------------------
	export default{
		data(){
			return{
				msg1:'',
			}
		},
		mounted(){
			console.log(this.$route.params.msgKeyOne)
			this.msg1 = this.$route.params.msgKeyOne
			console.log("哈哈")
			console.log(this.msg1)
		}
	}

显示的效果如下

第二种 path+query

发送方：

	<router-link :to="{
		path:'TestPage',
		query:{
			msgKeyOne:'valueOne',
		}
	}">跳转测试页面</router-link>

接收方：

<h1>这是测试页面</h1>
<h2>{{msg1}}</h2>
-------------------------------------------------------------------------------------
	export default{
		data(){
			return{
				msg1:'',
			}
		},
		mounted(){
			console.log(this.$route.query.msgKeyOne)
			this.msg1 = this.$route.query.msgKeyOne
			console.log("哈哈")
			console.log(this.msg1)
		}
	}

name+params 跳转页面参数不会在地址栏中看到，相当于post。

path+query 跳转页面参数在地址栏中可以看到，相当于get。