Vue页面跳转传参

Vue页面跳转并传递参数

作者：爱编程的小金毛球球

日期：2020年3月15日

1、通过router-link进行跳转，传递方式：

使用query传递参数，路由必须使用path引入，
使用params传递参数，路由必须使用name引入

<router-link :to="{path: '/content', query: {key: 'hello', value: 'world'}}">
</router-link>       

跳转地址 -----------> /content?key=hello&value=world
取值 -----------> this.$route.query.key

<router-link :to="{name: '/content', params: {key: 'hello', value: 'world'}}">
</router-link>　　

跳转地址 -----------> /content??? (暂时没用过)
取值 -----------> this.$route.params.key

2、$router方式跳转

this.$router.push({
　　path: '/content',
　　query: {
　　　　name: 'admin',
　　　　password: 123456
　　}
});

跳转地址 -----------> /content?name=admin&password=123456
取值 -----------> this.$route.query.name

this.$router.push({
　　name: 'content',
　　params: {
　　　　password: 123456
　　}
});

跳转地址 -----------> /content/123456
取值 -----------> this.$route.params.password