Question

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

在我的App.vue组件（这是＆＃34;主要＆＃34;组件并具有导航栏）上有这个按钮：

<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）中，我定义了＆＃34; auth＆＃34;这样的方法：

...
  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，它处理登录模板的视图并调用＆＃34; auth.login＆＃34;方法与所需的参数。

问题是我希望在登录后使用auth.user中的值从App.vue更新用户。我应该怎么做？我是否必须管理v-on：点击和v-link优先级并提出一种新方法？

编辑：

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

Answer 1

我设法找到了一个解决方案：

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

遵循文档here

Vue.js - 使用v-on：单击并进行v-link连接

1 个答案: