vue开发中，使用的页面传参方式

编程式路由跳转： this.$router.push()

1、不带参数跳转

a页：

<button @click="goTo">跳转到关于我们</button>

goTo() {
    this.$router.push('/b');
}

2.带参数跳转

a页携带参数：

//query方式
<button @click="goTo">跳转到B页</button>

goTo() {  
    this.$router.push({
        path: '/b',
        query: {
            name: "ming",
            age: 18
        }
    });
}
//⚠️注：如果要传递的参数很长时，请用params方式，因为query方式是通过URL传递的，而URL传参数长度是有限制的哦！！

//params方式
<button @click="goTo">跳转到关于我们</button>

goTo() {
    this.$router.push({
        name: "b", // ⚠️注：这里不能用path路径，只能用name【请对照router.js中的路由规则中的name项】，否则取不到传过去的数据
        params: {
            name: "ming",
            age: 18
        }
    });
}

b页接收参数:

//⚠️注：在传递参数时，用什么方式传参，就用什么方式接收！！
// 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
console.log(this.$route.query.name);    // ming
console.log(this.$route.query.age);     // 18

// 以params方式接收参数：【params方式，类似ajax中的post方式】
console.log(this.$route.params.name);   // ming
console.log(this.$route.params.age);    // 18
 
// this.$route 路由信息对象
console.log(this.$route);  //this.$route 对象中包涵了路由的相关信息

标签跳转

1、不带参数跳转

<router-link to="/b">
    <button>跳转到b页</button>
</router-link>
 
<router-link :to="{path: '/b'}">
    <button>跳转到a页</button>
</router-link>

2、带参数跳转

<router-link :to="{path: '/b', query: {name:'ming', age: 18 }}">
    <button>跳转到b页</button>
</router-link>
 
<router-link :to="{name: 'b', params: {name:'ming', age: 18 }}">
    <button>跳转到b页</button>
</router-link>

b页接收参数

// 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
console.log(this.$route.query.name);    // ming
console.log(this.$route.query.age);     // 18

// 以params方式接收参数：【params方式，类似ajax中的post方式】
console.log(this.$route.params.name);    // ming
console.log(this.$route.params.age);     // 18