Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動(dòng)態(tài)路由傳參 + 普通路由傳參)
更新時(shí)間：2025年05月21日 10:13:31 作者：Web - Nancy
這篇文章主要介紹了Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動(dòng)態(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、功能：
- 嵌套路由映射
- 動(dòng)態(tài)路由選擇
- 模塊化、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
- 細(xì)致的導(dǎo)航控制
- 自動(dòng)激活 CSS 類的鏈接
- HTML5 history 模式或 hash 模式
- 可定制的滾動(dòng)行為
- 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、動(dòng)態(tài)路由
路由配參
{
path: '/test/:title',
name: 'test',
component: () => import('../views/TestView.vue')
},動(dòng)態(tài)傳參
router.push({
path: '/test/' + 888,
})接收參數(shù)
console.log(route);
打印結(jié)果
注：路由之間跳轉(zhuǎn)用router，獲取當(dāng)前頁面的路由信息用route
3、對(duì)比普通路由和動(dòng)態(tài)路由在瀏覽器的展現(xiàn)形式
1）普通路由傳參 - 有問號(hào)
2）動(dòng)態(tài)路由傳參 - 直接跟在地址后面
到此這篇關(guān)于Vue3 路由配置 + 路由跳轉(zhuǎn) + 路由傳參的操作方法(動(dòng)態(tài)路由傳參 + 普通路由傳參)的文章就介紹到這了,更多相關(guān)vue路由配置路由跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例
本文主要介紹了vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
淺析vue cli3 封裝Svgicon組件正確姿勢(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
使用vue腳手架（vue-cli）搭建一個(gè)項(xiàng)目詳解
這篇文章主要介紹了vue腳手架（vue-cli）搭建項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用npm報(bào)了很多錯(cuò),做的事情就是把錯(cuò)誤復(fù)制到百度上去搜索,看看哪個(gè)解決方案有效,下面這篇文章主要給大家介紹了關(guān)于npm打包失敗排查的全過程,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue debug 二種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue中靈活拖拽的前端神器VueDraggablePlus的用法詳解
這篇文章主要介紹了一款功能強(qiáng)大、靈活易用的前端組件VueDraggablePlus,作為前端工程師,我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)拖拽功能的場景,而VueDraggablePlus正是為了解決這一痛點(diǎn)而誕生的,讓我們一起來看看它的特點(diǎn)和用法吧2024-03-03
vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會(huì)將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對(duì)public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09
徹底搞懂并解決vue-cli4中圖片顯示的問題實(shí)現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08