vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用
vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用通过路由传参拿到跳转前页面数据并在页面使用传来的数据使用场景:用户在充值页面输入的账号和充值金额,跳转到充值成功页面展示数据!
·
四、注意 query 和 params 之间的区别,灵活使用
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,
};
},
更多推荐
已为社区贡献5条内容
所有评论(0)