Vue页面间传值(使用路由传参,含params、query)
总结:query传参通过path跳转,params传参通过name跳转需求:忘记密码页面输入邮箱后点击下一步发送验证码请求,跳转到验证码页面中让用户输入验证码,在这个过程中需要将忘记密码页面的邮箱参数,传递到验证码页面。实现方法:将忘记密码页面中通过路由跳转时传参,将email传递到验证码页面,同时在验证码页面路由上配置参数,在验证码页面中使用钩子函数(created),检测路由,发生变化时,调用
·
目录
总结:
query传参通过path跳转,params传参通过name跳转
需求:
忘记密码页面输入邮箱后点击下一步发送验证码请求,跳转到验证码页面中让用户输入验证码,在这个过程中需要将忘记密码页面的邮箱参数,传递到验证码页面。
实现方法:
将忘记密码页面中通过路由跳转时传参,将email传递到验证码页面,同时在验证码页面路由上配置参数,在验证码页面中使用钩子函数(created),检测路由,发生变化时,调用路由参数的方法,将上一页面数据存储到本页面即可。
1、params传参
params传参可以认为是post的方法,因为他的一种传参方法是看不到参数的,获取的时候通过params来获取。通过name来匹配相应的组件。
router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new Router({
routes: [
//验证码页面
{
//将忘记密码页面中的email传到此页面
path: '/resetcode/:email',
name: 'resetcode',
component: () => import('@/pages/ResetCode'),
},
//忘记密码页面
{
path: '/forget',
component: () => import('@/pages/Forget'),
},
]
})
forget页面(params传参):
this.$router.push({
name: "resetcode",
params: {
email: this.email,
},
});
resetcode页面:
<script>
export default {
name: "ResetCode",
data() {
return {
code: ""
};
},
//created 钩子函数 Vue 初始化时执行
created: function () {
this.getParams();
},
watch: {
//监测路由变化,只要变化了就调用路由参数方法将数据存储本组件
$route: "getParams",
},
methods: {
getParams: function () {
//取得路由带过来的参数
let routeEmail = this.$route.params.email;
//将数据放在当前组件的数据内
this.email = routeEmail;
},
},
};
</script>
2、query传递参数
query传参可以认为是get传参,参数会在请求的url中显示出来,以?,&连接。
forget页面(params传参):
this.$router.push({
path: "/resetcode",
query: {
email: this.email,
},
});
resetcode页面:
<script>
export default {
name: "ResetCode",
data() {
return {
code: ""
};
},
//created 钩子函数 Vue 初始化时执行
created: function () {
this.getQuerys();
},
watch: {
//监测路由变化,只要变化了就调用路由参数方法将数据存储本组件
$route: "getQuerys",
},
methods: {
getQuerys: function () {
//取得路由带过来的参数
let routeEmail = this.$route.params.email;
//将数据放在当前组件的数据内
this.email = routeEmail;
},
},
};
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)