2.3　配置vue-router路由模块

在Vue3项目中，路由是必不可少的模块之一，使用Vite创建的Vue3项目默认并没有安装路由模块，本节将讲解在项目中手动安装vue-router路由模块的方法。

运行下述命令安装vue-router。

npm install vue-router@4

注意：

由于是Vue3项目，因此应选择4.0以上版本的路由。

接下来在项目中引入路由模块，为了方便后期对路由的管理，我们将路由模块抽离成一个独立的文件，抽离路由模块需要以下两个步骤。

（1）新增路由文件。在src目录下新增router文件夹并新建index.js文件，index.js示例代码如下。

代码解析：

在vue-router中引入createRouter方法的作用是创建路由实例对象，引入createWebHashHistory方法的作用是设置路由模式为哈希模式。

常量routes数组的作用是存储项目中所有的匹配规则。由于是自定义模块，最后使用export导出路由实例对象。

（2）在main.js入口文件挂载路由，使用路由模块，示例代码如下。

//引入路由自定义模块
import router from './router/index.js'
import App from './App.vue'
const app=createApp(App)
app.use(router)