VUE DEMO之模拟登录个人中心页面之间数据传值实例

我们来详细讲解一下“VUE DEMO之模拟登录个人中心页面之间数据传值实例”。

简介

在Vue框架中，不同页面之间的数据传值是常见的操作。本文就介绍一种实现模拟登录个人中心页面之间数据传值的方法。通过这种方法，可以更好地理解在Vue中如何实现不同页面之间的数据传值。

实现过程

准备工作

首先，需要准备好Vue.js和Vue-Router两个库。可以使用npm或者yarn进行安装：

npm install vue
npm install vue-router

创建Vue实例

在创建Vue实例之前，需要先定义一个路由。路由可以定义在一个单独的文件中，我们这里直接定义在Vue实例中。

const routes = [
  { path: '/login', component: LoginComponent },
  { path: '/user-center/:id', component: UserCenterComponent }
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

const vm = new Vue({
  el: '#app',
  router,
  data: {
    currentUser: null
  }
})

这里通过Vue.use()注册Vue-Router插件，创建一个VueRouter实例，并将其添加到Vue实例中。

定义两个组件

我们需要定义两个组件，分别是登录组件和个人中心组件。在路由中分别对应了两个路径。这里只展示了UserCenterComponent部分代码：

const UserCenterComponent = Vue.extend({
  template: `
    <div>
      <h2>User Center</h2>
      <div class="user-info">
        用户名：{{ currentUser.name }}<br>
        年龄：{{ currentUser.age }}<br>
        性别：{{ currentUser.gender }}<br>
      </div>
    </div>
  `,
  data() {
    return {
      currentUser: null
    }
  },
  created() {
    this.loadUser(this.$route.params.id)
  },
  watch: {
    '$route.params.id': function(newId) {
      this.loadUser(newId)
    }
  },
  methods: {
    loadUser(id) {
      // 通过 id 加载用户数据
      // 省略具体实现
      this.currentUser = {
        name: '张三',
        age: 18,
        gender: '男'
      }
    }
  }
})

在UserCenterComponent中，定义了一些用于显示用户信息的模板和一些用于获取用户信息的方法。这里只模拟了一个用户对象。

模拟登录

在LoginComponent中，通过表单获取到用户名和密码。并在提交表单之后，将用户名存储在Vue实例的currentUser属性中。这个属性将用于在不同页面之间传递数据。

const LoginComponent = Vue.extend({
  template: `
    <form>
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <button @click.prevent="login">登录</button>
    </form>
  `,
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 模拟登录请求
      // 省略具体实现
      vm.currentUser = {
        name: this.username,
        age: 18,
        gender: '男'
      }
      this.$router.push(`/user-center/${this.username}`)
    }
  }
})

在登录成功之后，将用户名和路由拼接在一起，实现了跳转到个人中心页面，并且在URL中传递了参数。

接收数据

UserCenterComponent中的created()方法，实现了在组件创建之后通过$id获取到路由参数，并且调用了loadUser()方法，在方法中通过参数id加载了用户数据。

在loadUser()方法中，通过异步请求获取到用户数据，并将获取到的数据赋值到了组件的currentUser属性中。

示例说明

下面举两个示例说明：

点击登录按钮之后，如果用户名和密码不匹配，应该弹出提示框提示用户登录失败。

在login()方法中，模拟登录请求的具体实现并没有给出。如果登录失败，可以通过catch语句捕获异常，并且弹出提示框。例如：

login() {
  // 模拟登录请求
  // 省略具体实现
  try {
    if (username === 'admin' && password === 'password') {
      vm.currentUser = {
        name: username,
        age: 18,
        gender: '男'
      }
      this.$router.push(`/user-center/${username}`)
    } else {
      throw new Error('用户名或密码错误')
    }
  } catch (e) {
    alert(e.message)
  }
}

在个人中心页面中点击一个修改信息的按钮后，弹出一个对话框，用户可以在对话框中输入新的信息并保存。

可以在UserCenterComponent中定义一个editInfo()方法，用于响应用户点击修改信息的操作。在这个方法中，弹出一个对话框，并且在对话框中显示当前用户信息。用户可以修改信息，并且在对话框中点击保存按钮后，将新的用户信息保存到数据库中。例如：

editInfo() {
  const dlg = this.$dialog({
    title: '修改信息',
    content: `
      <div>
        姓名：<input v-model="currentUser.name"><br>
        年龄：<input v-model="currentUser.age"><br>
        性别：<input v-model="currentUser.gender"><br>
      </div>
    `,
    buttons: [
      {
        text: '取消',
        click: function() {
          dlg.close()
        }
      },
      {
        text: '保存',
        click: function() {
          // 保存用户信息
          // 省略具体实现
          alert('保存成功')
          dlg.close()
        }
      }
    ]
  })
}

这个editInfo()方法会弹出一个对话框，对话框中展示了当前用户的信息，用户可以修改后点击保存按钮进行保存。保存成功之后，会弹出一个提示框，提示用户保存成功。