vue router页面跳转及传参?
一、 router-link跳转
### 1.不带参数,name,path都行, 建议用name
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
###2.带params参数
<router-link :to="{name:'home', params: {id:10001}}">
###3.带query参数
<router-link :to="{name:'home', query: {id:10001}}">
二、this.$router.push()
### 1.不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
### 2. query传参
this.$router.push({name:'home',query: {id:'10001'}})
this.$router.push({path:'/home',query: {id:'10001'}})
### 3.params传参
this.$router.push({name:'home',params: {id:'10001'}}) // 只能用 name
三、 this.$router.replace()
###1. 不带参数
this.$router.replace('/home')
this.$router.replace({name:'home'})
this.$router.replace({path:'/home'})
###2. query传参
this.$router.replace({name:'home',query: {id:'10001'}})
this.$router.replace({path:'/home',query: {id:'10001'}})
###3. params传参
this.$router.replace({name:'home',params: {id:'10001'}}) // 只能用 name
四、注意 query 和 params 之间的区别,灵活使用
* query:类似get
1. 跳转后参数会拼接在url后面,不安全 密码之类还是用params;
2. query刷新页面id还在;
3. query中 html 取参:$route.query.id
4. query中 script 取参:this.$route.query.id
* params:类似post
1. 跳转之后页面url后面不会拼接参数, 但是刷新页面id会消失。
2. 不配置path ,第一次可请求,刷新页面id会消失
3. 配置path,刷新页面id会保留
4. params 路由配置:path: "/home/:id" 或者 path: "/home:id" ,
5. params中 html 取参:$route.params.id
6. params中 script 取参:this.$route.params.id
场景一:把当前页面展示的数据在另一个页面使用
通过路由传参拿到跳转前页面数据并在页面使用传来的数据
使用场景:用户在充值页面输入的账号和充值金额,跳转到充值成功页面展示数据!
编辑
页面1:数据展示以及路由跳转传参
1. 数据渲染:
表具编号:<span>{{ numberForm.number }}</span>
2. data 里面定义数据:
return {
numberForm: {
number: "11111111",
},
};
3. 方法里面通过路由传参把当前充值编号传到下个页面
methods: {
biaojuchongzhi() {
this.$router.push({
name: "biaojuchongzhi",
params: { number: this.numberForm.number },
});
},
},
页面2:接收页面1展示的已存在的数据
1. 数据渲染:v-model="chongzhiForm.money"
2. 接收页面 1 路由传过来的编号参数
data() {
return {
chongzhiForm: {
number: this.$route.params.number,
money: "",
},
};
},
3. 方法里面通过路由传参把当前充值·编号·和·金额·传到下个页面
methods: {
onSubmit(values) {
this.$router.push({
name: "paysuccess",
params: {
number: this.chongzhiForm.number,
money: this.chongzhiForm.money,
},
});
},
},
页面3:接收页面1传入的编号数据 和 页面2传入的金额数据
1. 数据渲染:
表具编号:<span>{{number}}</span>
充值金额:<span class="bold">¥{{money}}</span>
2. 接收上个页面通过路由传来的数据:
data() {
return {
number: this.$route.params.number,
money: this.$route.params.money,
};
},