安裝Vue Router 的步驟如下：1. 確認(rèn)項目基於Vue 3 創(chuàng)建，查看package.json 中的vue 版本；2. 在終端運行npm install vue-router@4 或yarn add vue-router@4 安裝依賴；3. 創(chuàng)建router.js 文件並配置路由表，使用createRouter 和createWebHistory 初始化路由實例；4. 在main.js 中引入並掛載路由實例到應(yīng)用中；5. 注意頁面需包含、使用 進(jìn)行導(dǎo)航，並在部署時配置服務(wù)器支持history 模式。

安裝Vue Router 其實不算複雜，但對新手來說，容易在細(xì)節(jié)上出錯。下面會一步步講清楚怎麼正確安裝和配置Vue Router，適用於Vue 3 的項目（如果是Vue 2，步驟略有不同）。

確認(rèn)項目環(huán)境是否符合要求

在開始之前，先確認(rèn)你的項目是基於Vue 3 創(chuàng)建的，使用的是支持Vue Router 的版本。如果你用的是Vite 或者Vue CLI 創(chuàng)建的項目，那基本沒問題。

• 需要Node.js 和npm（或者yarn、pnpm）已經(jīng)安裝好
• 推薦使用Vue 3 Vue Router 4 的組合

如果還不確定當(dāng)前項目版本，可以在package.json中查看"vue"的版本號。

安裝Vue Router 包

打開終端，進(jìn)入你的項目根目錄，然後運行安裝命令：

• 如果你用npm：

   npm install vue-router@4

• 如果你用yarn：

   yarn add vue-router@4

這一步完成後，Vue Router 就被添加到項目依賴中了。你可以檢查node_modules文件夾裡有沒有vue-router ，也可以看package.json中的dependencies是否新增了這一項。

創(chuàng)建並配置路由文件

接下來需要創(chuàng)建一個專門管理路由的文件，通常叫它router.js或者router/index.js 。

內(nèi)容大致如下：

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

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

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

export default router

這裡有幾個關(guān)鍵點要注意：

• 路由組件一般放在views文件夾下，而不是components
• 每個路由對象必須有path和component
• 使用createWebHistory()是為了啟用HTML5 的history 模式，URL 更友好

在main.js 中引入並掛載路由

最後一步就是把剛剛創(chuàng)建的路由實例掛載到Vue 應(yīng)用中。

如果你是通過createApp初始化應(yīng)用的，那麼可以這樣寫：

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

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

注意這裡的.use(router) ，這是Vue 插件的標(biāo)準(zhǔn)用法，少了這步，頁面就無法識別<router-view></router-view>和<router-link></router-link> 。

常見問題小貼士

• 頁面空白？檢查是否漏寫了<router-view></router-view> ，它是顯示路由組件的地方
• 鏈接跳轉(zhuǎn)沒反應(yīng)？確認(rèn)是不是用了普通的<a></a>標(biāo)籤，應(yīng)該用<router-link to="/">首頁</router-link>
• 開發(fā)環(huán)境能跑，部署後404？可能是服務(wù)器沒配置history 模式的支持，需要在nginx 或其他服務(wù)器設(shè)置重定向規(guī)則

基本上就這些步驟，雖然不復(fù)雜，但每一步都不能少。

以上是如何安裝VUE路由器？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！