Vue 路由器的切换不起作用

Question

我有一个带有 2 个按钮的菜单。但是切换不起作用。而且，主页是不可见的。我的沙盒 https://codesandbox.io/s/serene-neumann-mpqs0?file=/src/App.vue

这是router.js

const routes = [
  {
    path: "/",
    component: Main
  },
  {
    path: "/history",
    component: History
  },
  {
    path: "/favorites",
    component: Favorites
  }
];
const router = new VueRouter({
  routes
});
export default router;

这是页眉

<template>
  <header class="sticky top-0 z-40 w-full flex bg-yellow-500 md:h-16 shadow-md">
    <div class="w-1/4 flex justify-end">
      <router-link to="/favorites">
        <button title="Favorites" class="p-2 hover:text-red has-tooltip">
          Favorites
        </button>
      </router-link>

      <button class="p-2 hover:text-red" title="History">
        <router-link to="/history"> History </router-link>
      </button>
    </div>
  </header>
</template>

App.vue

<template>
 <Header/>
  <router-view></router-view>
 
</template>

<script>
import Header from './components/Header.vue'
export default {
  name: "App",
  components: {
   Header
  },
};
</script>

和main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/index.css";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

Answer 1

你混合了 vue-router v3/v4。

将所有内容更新到最新版本并调整路由器，使其根据最新文档工作：

https://codesandbox.io/s/keen-morning-rufbo?file=/src/router.js

Vue 路由器的切换不起作用

the switching of the Vue Router is not working

vue.js

vue-router