无法使用 VueRouter 浏览我的不同路由器链接

Question

我第一次使用 vue-cli 创建的项目。 我正在使用 VueRouter 在多个视图之间导航。 问题是，如果我访问 de route '/workshops'、'/categories' 或 '/machines'，总是会出现 'Workshops' 组件……这是我的路由器声明：

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import Categories from '../views/Categories.vue';
import Machines from '../views/Machines.vue';
import Workshops from '../views/Workshops.vue';

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/categories',
    name: 'Categories',
    component: Categories
  },
  {
    path: '/machines',
    name: 'Machines',
    component: Machines
  },
  {
    path: '/workshops',
    name: 'Workshops',
    component: Workshops
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

这与默认声明的内容非常相似这里是 Workshop 组件的声明（但 Machines 和 Categories 使用完全相同的结构）

<template>
    <div class="workshops">
        <h1>Workshops</h1>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    export default class Workshops extends Vue {

    }
</script>

并以 Categories.vue 为例：

<template>
    <div class="categories">
        <h1>Catégories</h1>
    </div>
</template>

<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class Categories extends Vue {}
</script>

主 App.vue 声明如下：

<template>
  <div id="app">
    <header>
        <nav>
            <h2 class="brand-name">Flexshop</h2>
            <hr>
            <ul>
              <li><router-link to="/workshops">Ateliers</router-link></li>
              <li><router-link to="/categories">Catégories</router-link></li>
              <li><router-link to="/machines">Machines</router-link></li>
            </ul>

            <div class="bottom">
                <ul>
                    <router-link to="/settings">Options</router-link>
                    <router-link to="/credits">Crédits</router-link>
                </ul>
            </div>
        </nav>
    </header>

    <main>
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </main>
  </div>
</template>

如果我只使用路由器声明中的三个路由之一，则会显示正确的组件，似乎最新组件的声明会覆盖另外两个......

谢谢你的帮助 ！

Answer 1

你应该使用组件装饰器，像这样

<template>
    <div class="workshops">
        <h1>Workshops</h1>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    
    @Component
    export default class Workshops extends Vue {

    }
</script>