如何在 Vue.js 中的组件之间共享注销方法？答案

【问题标题】：How can I share logout method between components in Vue.js?如何在 Vue.js 中的组件之间共享注销方法？
【发布时间】：2018-07-01 07:27:04
【问题描述】：

我觉得这个不错mode to share a method between components in Vue.js

现在我的问题是：我要分享注销方法所以我在 auth.ts 文件中创建了这个函数

import Router from 'vue-router';

const router = new Router({
  mode: 'history'
});

export function logout() {
  router.replace('/'); // It changes url but doesnt render component :-(
  router.go(0); // It reload the application :-(
}

在一个组件中，我以这种方式调用函数：

import { logout } from '../../utils/auth';

  exit() {
    logout();
  }

在模板html中

<div v-on:click="exit">
    logout
</div>

该应用程序有效，但我不想重新加载它我只想更改页面而不重新加载

vue.js如何在不刷新的情况下更新页面数据？

【问题讨论】：

标签： routes vuejs2

【解决方案1】：

你需要在你的 Vue 路由器配置中为 / 路由分配一个 Vue 组件：

import HomePage from '../HomePage.vue'

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    }
  ]
});

确保HomePage 包含应用程序的主页，以便在路由器导航到/ 时呈现。

【讨论】：