Vue 3 路由使用完全指南(整體流程)
更新時間：2026年06月04日 09:10:15 作者：風吹夏回
這段文章詳細介紹了Vue3路由的使用方法,涵蓋了創(chuàng)建路由實例、注冊路由插件和在組件中使用路由的三步流程,適合Vue3開發(fā)者參考和學習,感興趣的朋友一起看看吧
一、整體流程：三個文件三步走
| 步驟 | 文件 | 做什么 | 導入什么 |
|---|---|---|---|
| 1 | router/index.js | 創(chuàng)建路由實例 | createRouter, createWebHistory |
| 2 | main.js | 注冊路由插件 | router 實例 |
| 3 | 組件 | 使用路由 | useRouter, useRoute |
二、第一步：創(chuàng)建路由實例
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
const router = createRouter({
history: createWebHistory(), // 不帶 # 的 URL
routes
})
export default router兩種路由模式
| 模式 | 方法 | URL 示例 | 服務器配置 |
|---|---|---|---|
| History | createWebHistory() | /about | 需要 |
| Hash | createWebHashHistory() | /#/about | 不需要 |
三、第二步：注冊路由
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) // 別忘了這行！
app.mount('#app')四、第三步：在組件中使用路由
4.1 頁面跳轉(zhuǎn)
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 路由名稱跳轉(zhuǎn)（推薦）
router.push({ name: 'about' })
// 路徑跳轉(zhuǎn)
router.push('/about')
// 返回上一頁
router.back()
router.go(-1)
</script>4.2 獲取路由參數(shù)
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 獲取路徑參數(shù) /user/:id
console.log(route.params.id)
// 獲取查詢參數(shù) ?keyword=hello
console.log(route.query.keyword)
</script>4.3 聲明式跳轉(zhuǎn)（模板中）
<template>
<router-link to="/about">關(guān)于我們</router-link>
<router-link :to="{ name: 'home' }">首頁</router-link>
</template>五、路由出口：<router-view />
路由匹配的組件會渲染在 <router-view /> 的位置：
<!-- App.vue 根組件 -->
<template>
<div>
<nav>
<router-link to="/">首頁</router-link>
<router-link to="/about">關(guān)于</router-link>
</nav>
<!-- 路由頁面在此處顯示 -->
<router-view />
</div>
</template>六、完整項目結(jié)構(gòu)
src/
├── main.js # 注冊路由
├── App.vue # 根組件，包含 <router-view />
├── router/
│ └── index.js # 路由配置
└── views/
├── Home.vue # 首頁
└── About.vue # 關(guān)于頁七、常見錯誤排查
| 現(xiàn)象 | 可能原因 |
|---|---|
| 點擊跳轉(zhuǎn)沒反應 | router.push 拼寫錯誤 |
跳轉(zhuǎn)報錯 router is undefined | 組件中沒寫 const router = useRouter() |
| 整個路由不工作 | main.js 中沒有 app.use(router) |
| URL 變了但頁面沒變 | 根組件缺少 <router-view /> |
| 導入報錯 | 文件路徑不正確 |
八、記憶口訣
創(chuàng)建 → 注冊 → 使用，三步缺一不可
router.js：創(chuàng)建路由，createRoutermain.js：注冊插件，app.use(router)- 組件中：
useRouter()跳轉(zhuǎn)，useRoute()取值
確 |
到此這篇關(guān)于Vue 3 路由使用完全指南的文章就介紹到這了,更多相關(guān)Vue 3 路由使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue3中的路由使用解讀
- Vue3路由傳參使用新手詳細指南
- Vue3使用Vue Router實現(xiàn)前端路由控制
- vue3中使用keepAlive緩存路由組件不生效的問題解決
- Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
- vue3使用vue-router嵌套多級路由的方法
- Vue3嵌套路由中使用keep-alive緩存多層的實現(xiàn)
- vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法
- vue3中7種路由守衛(wèi)的使用大全舉例
- Vue3實戰(zhàn)學習配置使用vue?router路由步驟示例
相關(guān)文章
vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法示例
這篇文章主要介紹了vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法,結(jié)合實例形式分析了vue.js使用v-text和v-html、v-cloak防止花括號{{}}閃爍的解決方法,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中的同步和異步使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-08-08
這篇文章主要介紹了vue.js click點擊事件獲取當前元素對象的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
antd+vue實現(xiàn)動態(tài)驗證循環(huán)屬性表單的思路
今天通過本文給大家分享antd+vue實現(xiàn)動態(tài)驗證循環(huán)屬性表單的思路，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價刷新的案列給大家詳細講解，需要的朋友可以參考下2022-11-11
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
ant-design-vue前端UI庫,如何解決Table中時間格式化問題
這篇文章主要介紹了ant-design-vue前端UI庫,如何解決Table中時間格式化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進行的底層操作,它是一種有效的的補充和擴展,不僅可以用于定義任何的dom操作,并且是可以復用的,下面這篇文章主要給大家介紹了關(guān)于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue動態(tài)組件與異步組件,結(jié)合實例形式分析了動態(tài)組件與異步組件相關(guān)概念、功能及使用技巧,需要的朋友可以參考下2019-02-02