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（这是一个问题），但我的登录页面显示为纯文本。

在下面的 mount 之前更改使用顺序，我没有收到错误： const app = createApp(App); app.use(router); app.mount('#app');

错误：

Uncaught TypeError: Cannot destructure property 'options' of '(0 , vue__WEBPACK_IMPORTED_MODULE_1__.inject)(...)' as it is undefined.

Answer 1

感谢 link 回购，这确实帮助我看到了问题：

您没有安装 Vue Router。

npm i vue-router

您的 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>

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

Router-link not clickable, where have I gone wrong?

javascript

vue.js

vue-router