目录

总结:

需求:

实现方法:

1、params传参

2、query传递参数


总结:

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>

Logo

前往低代码交流专区

更多推荐