vue3 安装路由

在Vue3中安装路由需要执行以下步骤：

1. 打开终端，进入项目文件夹。
2. 运行命令`npm install vue-router@next --save`来安装最新版本的Vue Router。如果你需要安装特定版本的Vue Router，你可以将命令中的`next`替换成对应的版本号，例如`4.0.13`。
3. 在项目的`src`目录下，新建一个`router`文件夹。
4. 在`router`文件夹中，创建一个名为`index.ts`的文件。
5. 在`index.ts`文件中，引入Vue Router的相关模块和组件，例如：

   import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

6. 配置路由信息，定义路由的路径和对应的组件，例如：

   const routes: Array<RouteRecordRaw> = [
     {
       path: "/",
       component: () => import("../views/home/index.vue"), // 这里是你的组件路径
     },
   ];

7. 创建一个`router`实例，在配置中使用`createWebHistory`方法指定使用浏览器的`history`模式，例如：

   const router = createRouter({
     history: createWebHistory(),
     routes,
   });

8. 在`index.ts`文件中，导出创建的`router`实例，例如：

   export default router;

9. 在`main.ts`文件中，引用`router`下的`index.ts`文件，例如：

   import router from "./router/index.ts";

10. 在创建Vue应用实例之前，使用`app.use()`方法注册路由，例如：

    const app = createApp(App);
    app.use(router);

11. 运行你的Vue应用，你现在已经完成了Vue3中安装路由的过程。

请根据你的项目需求和配置进行相应的调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3+webpack+vue-router封装路由](https://download.csdn.net/download/qq_34297287/85431802)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3+ts:安装路由（router）](https://blog.csdn.net/weixin_45440521/article/details/129318826)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]