Question

我发现这很好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？

Answer 1

您需要在Vue Router配置中将Vue组件分配给/路由：

import HomePage from '../HomePage.vue'

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

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

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

1 个答案: