Vue页面间传值（使用路由传参，含params、query）

目录

总结：

需求：

实现方法：

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>