Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動態(tài)路由傳參 + 普通路由傳參)
更新時(shí)間：2025年05月21日 10:13:31 作者：Web - Nancy
這篇文章主要介紹了Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動態(tài)路由傳參 + 普通路由傳參),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
Vue Router： Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構(gòu)建單頁應(yīng)用變得輕而易舉。
效果
一、介紹
1、官方文檔：https://router.vuejs.org/zh/introduction.html
介紹 | Vue RouterVue.js 的官方路由
https://router.vuejs.org/zh/introduction.html
2、功能：
- 嵌套路由映射
- 動態(tài)路由選擇
- 模塊化、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
- 細(xì)致的導(dǎo)航控制
- 自動激活 CSS 類的鏈接
- HTML5 history 模式或 hash 模式
- 可定制的滾動行為
- URL 的正確編碼
二、準(zhǔn)備工作
1、安裝依賴包
npm install vue-router@4
2、示例版本
"vue-router": "^4.2.5",
三、目錄結(jié)構(gòu)
src
│ App.vue
│ main.ts
│
├─router
│ index.ts
│
└─view
HomeView.vue
AboutView.vue
TestView.vue四、使用步驟
1、新建頁面（含當(dāng)前頁面完整示例代碼）
HomeView.vue
<template>
<div>
<div>這是home頁面</div>
<div>
<button @click="toAboutPage">跳轉(zhuǎn)至about</button>
</div>
<div>
<button @click="toTestPage">跳轉(zhuǎn)至test</button>
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toAboutPage() {
router.push({
path: '/about',
query: {
title: '666'
}
})
}
function toTestPage() {
router.push({
path: '/test/' + 888,
})
}
</script>
AboutView.vue
<template>
<div>
<div>這是about頁面</div>
<div>
<button @click="toHomePage">跳轉(zhuǎn)至home</button>
</div>
<div>
<button @click="toTestPage">跳轉(zhuǎn)至test</button>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
function toHomePage() {
router.push({
name: 'home',
params: {
title: 'about'
}
})
}
function toTestPage() {
router.push({
name: 'test',
params: {
title: 111
},
})
}
console.log(route);
</script>TestView.vue
<template>
<div>
<div>這是test頁面</div>
<button @click="toHomePage">跳轉(zhuǎn)至home</button>
</div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toHomePage() {
router.push('/')
}
console.log(route);
</script>2、路由配置
main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')routet/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
},
{
path: '/test',
name: 'test',
component: () => import('../views/TestView.vue')
},
]
})
export default routerApp.vue
<template>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>五、路由跳轉(zhuǎn)
1、使用 router-link 組件進(jìn)行導(dǎo)航 + 通過傳遞 `to` 來指定鏈接
<RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink>
2、編程式導(dǎo)航
router.push('/') // 根頁面，這里的“/”等同于home頁面
router.push({
path: '/about',
})注：必須配置下列代碼
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()六、路由傳參
1、普通路由
1）query
router.push({
path: '/about',
query: {
title: '666'
}
})2）params
router.push({
name: 'home',
params: {
title: 'about'
}
})2、動態(tài)路由
路由配參
{
path: '/test/:title',
name: 'test',
component: () => import('../views/TestView.vue')
},動態(tài)傳參
router.push({
path: '/test/' + 888,
})接收參數(shù)
console.log(route);
打印結(jié)果
注：路由之間跳轉(zhuǎn)用router，獲取當(dāng)前頁面的路由信息用route
3、對比普通路由和動態(tài)路由在瀏覽器的展現(xiàn)形式
1）普通路由傳參 - 有問號
2）動態(tài)路由傳參 - 直接跟在地址后面
到此這篇關(guān)于Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動態(tài)路由傳參 + 普通路由傳參)的文章就介紹到這了,更多相關(guān)vue路由配置路由跳轉(zhuǎn)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例，VeeValidate是Vue.js的驗(yàn)證庫，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
今天我們來學(xué)習(xí)一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個(gè)相對來說比較簡單，用的不是很多，當(dāng)然了，根據(jù)自己的項(xiàng)目情況自行決定使用，希望對大家有所幫助2022-07-07
websocket實(shí)現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue3實(shí)現(xiàn)動態(tài)路由與手動導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?中實(shí)現(xiàn)動態(tài)路由注冊和手動導(dǎo)航,確保用戶訪問的頁面與權(quán)限對應(yīng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹了vue中使用mockjs配置和使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在本篇文章里小編給大家分享的是關(guān)于vuex入門最詳細(xì)整理的相關(guān)內(nèi)容，需要的朋友們參考下。2020-03-03
Vue3頁面數(shù)據(jù)加載延遲的問題分析和解決方法
在?Vue?3?的項(xiàng)目中,當(dāng)我們使用響應(yīng)式數(shù)據(jù)（如?ref?或?computed）來管理頁面狀態(tài)時(shí),可能會遇到由于接口數(shù)據(jù)加載延遲,導(dǎo)致頁面初始渲染時(shí)數(shù)據(jù)尚未獲取完成的問題,本文針對此問題簡單分析了原因和解決方法,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue使用mui遇到的坑及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中在vuex的actions中請求數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue中在vuex的actions中請求數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11