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

Question

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

当我点击任一选项卡按钮时，都不会发生任何事情。我的任何组件都不显示。

我错过了什么？

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;

组件\组件A.vue

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

组件\组件B.vue

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

Answer 1

我认为这是Tabs&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路由器的Buefy组件，例如：

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