需要帮助弄清楚为什么 vue-router 不适用于我的简单选项卡控制场景

Question

我有一个非常简单的带有选项卡控件的示例应用程序。我希望在选择选项卡时显示组件 A 或组件 B。这应该由 vue-router 很容易地处理，但我不知道我的配置有什么问题。

当我单击任一选项卡按钮时，没有任何反应。 None 个我的组件显示。

我错过了什么？

main.js

import Vue from 'vue';
import {
  Tabs,
} from 'buefy';
import 'buefy/dist/buefy.css';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';

Vue.use(Tabs);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

App.vue

<template>
  <div id="app">
    <section>
      <b-tabs type="is-toggle">
        <b-tab-item label="Component A" to="/ComponentA"></b-tab-item>
        <b-tab-item label="Component B" to="/ComponentB"></b-tab-item>
      </b-tabs>
    </section>
    <router-view />
  </div>
</template>

<style>
</style>

router\index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/ComponentB',
    name: 'ComponentA',
    component: ComponentA,
  },
  {
    path: '/ComponentB',
    name: 'ComponentB',
    component: ComponentB,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

components\ComponentA.vue

<template>
  <div>Hello From Component A</div>
</template>

components\ComponentB.vue

<template>
  <div>Hello From Component B</div>
</template>

Answer 1

我认为这是现有的 issue，在 Buefy 中带有选项卡和路由器。你可以这样做：

<b-tabs>
    <router-link
        label="Component A"
        :to="{ name: 'ComponentA' }"
    >
        Component A
    </router-link>

    <router-link
        label="Component B"
        :to="{ name: 'ComponentB' }"
    >
        Component B
    </router-link>
</b-tabs>

或者使用支持Vue Router的Buefy组件，例如：

<b-button tag="router-link" to="/ComponentA" type="is-link">
    Component A
</b-button>

需要帮助弄清楚为什么 vue-router 不适用于我的简单选项卡控制场景

Need help figuring out why vue-router isn't working for my simple tab control scenario

vue.js

vue-router

buefy

main.js

App.vue

router\index.js

components\ComponentA.vue

components\ComponentB.vue