2.3　配置vue-router路由模塊

在Vue3項目中，路由是必不可少的模塊之一，使用Vite創(chuàng)建的Vue3項目默認(rèn)并沒有安裝路由模塊，本節(jié)將講解在項目中手動安裝vue-router路由模塊的方法。

運行下述命令安裝vue-router。

npm install vue-router@4

注意：

由于是Vue3項目，因此應(yīng)選擇4.0以上版本的路由。

接下來在項目中引入路由模塊，為了方便后期對路由的管理，我們將路由模塊抽離成一個獨立的文件，抽離路由模塊需要以下兩個步驟。

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

代碼解析：

在vue-router中引入createRouter方法的作用是創(chuàng)建路由實例對象，引入createWebHashHistory方法的作用是設(shè)置路由模式為哈希模式。

常量routes數(shù)組的作用是存儲項目中所有的匹配規(guī)則。由于是自定義模塊，最后使用export導(dǎo)出路由實例對象。

（2）在main.js入口文件掛載路由，使用路由模塊，示例代碼如下。

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