代码之家 › 专栏 › 技术社区 › Mohammad Mahdi KouchakYazdi

Vuejs-路由回上一个组件后停止清除数据属性

vue-component frontend vuejs2 vue.js

0

Mohammad Mahdi KouchakYazdi · 技术社区 · 7 年前

我正在实现一个简单的订阅应用程序。

1-在订阅的第一步,我得到了电话和昵称:

模板:

<input type="phone" v-model="phone" class="form-control" placeholder=" 09128684821">

data() {
  return {
    phone:''
  };
},

2-下一步是用户在SMS中接收的OTP(一次性密码)。

问题出在这里 糟糕的用户体验 )

1 回复 | 直到 7 年前

1

0

Brian Lee 7 年前

你可以利用 localStorage , sessionStorage

这里有一个 jsFiddle 演示本地存储和vue路由器。

Vue.use(VueRouter)

Vue.component('phone-number', {
  template: `<div>
  <label>Phone Number</label>
  <input v-model="phoneNumber">
  <router-link to="/otp">Next</router-link>
  </div>`,
  data: () => ({ phoneNumber: null }),
  watch: {
    phoneNumber: {
      handler: function (value) {
        localStorage.setItem('phone-number', value)
      }
    }
  },
  mounted () {
    this.phoneNumber = localStorage.getItem('phone-number')
  }
})

Vue.component('one-time-password', {
  template: `<div>
  <label>One Time Password</label>
  <input v-model="otp">
  <router-link to="/">Back</router-link>
  </div>`,
  data: () => ({ otp: null })
})

const router = new VueRouter({
  routes: [
    {
      component: {
        template: '<phone-number/>'
      },
      path: '/'
    },
    {
      component: {
        template: '<one-time-password/>'
      },
      path: '/otp'
    }
  ]
})

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