the switching of the Vue Router is not working-CodePudding

I have a menu with 2 buttons. But the switching is not working. Moreover, the main page is invisible. My sandbox https://codesandbox.io/s/serene-neumann-mpqs0?file=/src/App.vue

This is router.js

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

This is Header

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

and 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");

CodePudding user response：

You have kind of a mix between vue-router v3/v4.

Update everything to the latest versions and adapt the Router, so it works according to the latest docs should work:

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