需要帮助弄清楚为什么vue-router在我的简单选项卡控制方案中不起作用

问题描述

我有一个带有标签控件的非常简单的示例应用程序。我希望选择选项卡时显示组件A或组件B。这应该由vue-router相当轻松地处理，但是我不知道我的配置出了什么问题。

当我单击任一选项卡按钮时，什么都没有发生。我的所有组件均不显示。

我想念什么？

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>

解决方法

我认为这是现有的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>