安裝 Vue Router 的步驟如下：1. 確認項目基于 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 中引入并掛載路由實例到應用中；5. 注意頁面需包含 、使用 進行導航，并在部署時配置服務器支持 history 模式。

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

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

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

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

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

安裝 Vue Router 包

打開終端，進入你的項目根目錄，然后運行安裝命令：

• 如果你用 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。

內容大致如下：

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

這里有幾個關鍵點要注意：

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

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

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

如果你是通過 createApp 初始化應用的，那么可以這樣寫：

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

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

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

常見問題小貼士

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

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

以上是如何安裝VUE路由器？的詳細內容。更多信息請關注PHP中文網其他相關文章！