vue3 app挂载router

### 正确挂载路由器于Vue 3应用程序

在Vue 3项目中集成`vue-router`涉及几个重要步骤来确保路由功能正常工作。安装依赖之后，在应用入口处初始化并配置路由实例成为关键操作之一。

对于Vue 3而言，创建一个新的文件用于定义路由逻辑是一个常见做法，比如命名为`router/index.js`：

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

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

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

export default router;

随后，在项目的主入口文件（通常是`main.js`），引入上述构建好的路由对象，并将其作为参数传递给根组件的创建方法之中[^2]：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

通过这种方式，整个Vue 3 应用程序就能够识别不同的URL模式，并依据这些模式展示相应的页面或视图组件[^4]。