Question

我正在Vue.js中编写密码重置功能。作为流程的一部分，我生成一个密码密钥，该密钥是通过电子邮件发送给用户的重置URL的一部分。很可能用户可以在一个设备上请求重置，然后转到另一个设备进行重置。因此，将其存储在本地存储中不是一种选择。如何传递密码密钥和新密码。请指教。

Answer 1

使用Vue执行此操作的方法是使用vue-router并访问$route.query object。

例如，当网址为?key=somekey时，$route.query对象为`{key：＆＃34; somekey＆＃34;}。

Here's a demo CodeSandbox展示了如何使用它。

相关代码：

// main.js
import Vue from "vue";
import VueRouter from "vue-router";
import PasswordReset from "./PasswordReset";

Vue.use(VueRouter);

var router = new VueRouter({
  mode: 'history',
  routes: [{
    path: '/',
    component: {
      template: `<div>
   You are at '/'.<br>
     Click to simulate an external link user:
     <a href="https://lrrwkyv7k7.codesandbox.io/passwordreset?key=somekey">
     https://lrrwkyv7k7.codesandbox.io/passwordreset?key=somekey
     </a>
      </div>`
    }
  }, {
    path: '/passwordreset',
    component: PasswordReset
  }]
});

new Vue({
  el: "#app",
  router: router,
  template: '<router-view></router-view>'
});

// PasswordReset.vue
<template>
  <div id="app">
    <p>Hello, user.</p>
    <form action="" @submit="submit">
    Type some new password: <input type="text" name="newpass" v-model="newPass">
    <input type="hidden" name="key" :value="hiddenKey">
    <button>Send</button>
    </form>
    <hr>
    <div class="debug">
        Object that will be sent:
        <pre>{{ $data }}</pre>

        <a href="/">click here to get back to home</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "PasswordReset",
  data() {
    return {
      newPass: "",
      hiddenKey: ""
    };
  },
  mounted() {
    this.hiddenKey = this.$route.query.key;
  },
  methods: {
    submit(event) {
      alert('We would have sent:\n'+JSON.stringify(this.$data, null, 2));
      event.preventDefault(); // don't submit now, just testing...
    }
  }
};
</script>

Vue.js - 如何将URL参数捕获为隐藏的输入值

1 个答案: