Router-link无法点击，我哪里出了问题？

Question

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Products from '../views/Products.vue'
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/products',
        name: 'Products',
        component: Products
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

这是我的路由器 index.js 文件，位于我的 app.vue 文件下方。

   <template>
 <header class="top-bar spread">
      <nav class="top-bar-nav">
        <router-link to="/" class="top-bar-link">
          <i class="icofont-spoon-and-fork"></i>
          <span>Home</span>
        </router-link>
        <router-link to="/products" class="top-bar-link">
          <span>Products</span>
        </router-link>
        <router-link to="/past-orders" class="top-bar-link">
          <span>Past Orders</span>
        </router-link>
      </nav>
      <router-link @click="toggleSidebar" href="#" class="top-bar-cart-link">
        <i class="icofont-cart-alt icofont-1x"></i>
        <span>Cart ({{totalQuantity}})</span>
      </router-link>
    </header>
    <router-view/>
</template>

<script>

export default {
  name: 'App',
}
</script>

我正在学习教程，无法弄清楚我错过了什么，因为链接不起作用。我已经在索引文件中添加了路径，安装了 vue-router （这是一个问题），但我的登陆页面显示为纯文本。

在下面的安装之前更改使用顺序时，我没有收到错误： const app = createApp(App);应用程序。使用（路由器）； app.mount('#app');

错误：

未捕获的类型错误：无法解构“(0 , vue__WEBPACK_IMPORTED_MODULE_1__.inject)(...)'，因为它未定义。

Answer 1

感谢您提供存储库链接，这确实帮助我解决了问题：

1. 您没有安装 Vue Router。

npm i vue-router

1. 您的 App.vue 文件中存在一些 HTML 错误。这有效：

<template>
  <header class="top-bar spread">
    <nav class="top-bar-nav">
      <router-link to="/" class="top-bar-link">
        <i class="icofont-spoon-and-fork"></i>
        <span>Home</span>
      </router-link>
      <router-link to="/products" class="top-bar-link">
        <span>Products</span>
      </router-link>
      <router-link to="past-orders" class="top-bar-link">
        <span>Past Orders</span>
      </router-link>
      <button @click="toggleSidebar" class="top-bar-cart-link">
        <i class="icofont-cart-alt icofont-1x"></i>
        <span>Cart ({{ totalQuantity }})</span>
      </button>
    </nav>
  </header>
  <router-view />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      totalQuantity: 10,
    };
  },
  methods: {
    toggleSidebar() {
      console.log("toggling sidebar");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>