vuejs3 - 在 Vue3 中重新启动页面后我收到错误

Question

Delab 一些代码更改Vue3-Vite。我在 Vue3 中重新启动页面后收到错误消息。

未捕获的 ReferenceError：在初始化之前无法访问“路由器”

router\index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
]

App.vue

<router-link
            to="/"
        >
          <button
              type="button"
              class="btn btn-outline-primary mx-4"
          >
            Home
          </button>
        </router-link>

Answer 1

安装时，它永远不会看到您如何在应用程序中使用路由器。在所有情况下，您都应该执行类似的操作

    import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../views/Home.vue'
   

   import {   createApp} from 'vue';
 
     
     const routes = createRouter([
        {
             path: '/',
             name: 'Home',
            component: Home
         },
     )]

 const app = createApp(Home);
 app.use(routes);

Answer 2

路由器\index.js

import { createWebHistory, createRouter } from "vue-router";
const history = createWebHistory();
const routes = [/* Routes*/];
const router = createRouter({ history, routes });
export default router;

在 main.js 中添加路由器

import router from "./router";
createApp(App).use(router).mount("#app");