Vue.js - 一起使用 v-on:click 和 v-link答案

【问题标题】：Vue.js - using v-on:click and v-link togetherVue.js - 一起使用 v-on:click 和 v-link
【发布时间】：2017-07-05 22:05:31
【问题描述】：

我正在开发一个 Vue.js 应用程序，我正在尝试使用多个组件创建一个登录系统。

在我的 App.vue 组件（它是“主要”组件并具有导航栏）上有这个按钮：

<a class="nav-item" v-link="'login'" v-if="!user.authenticated">Login</a>

...

import auth from '../auth'

export default {
 data(){
  return{
   user = auth.user
  } 
 }
}

在另一个文件（/auth/index.js）中，我这样定义“auth”方法：

...
  user: {
    authenticated: false
  },

  login(email, password) {
    axios.post(LOGIN_URL, {
      email,
      password
    }).then((response) => {
      this.user.authenticated = true;
      this.user = response.data;
      router.go('/home');
    })
    .catch((error)=>{
      console.log(error);
    });
  }

然后我有另一个组件名称 Login.vue 来处理登录模板的视图并使用所需的参数调用“auth.login”方法。

问题是我想在他登录后使用来自 auth.user 的值更新来自 App.vue 的用户。我应该怎么做？我是否必须管理 v-on:click 和 v-link 优先级并提出新方法？

编辑：

我也尝试使用 beforeRouteEnter 方法，但没有成功

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

我设法找到了一个解决方案，添加了这个：

watch: {
  $route () {
    this.user = auth.user
  }
},

按照文档here

【讨论】：