Vue Router參數(shù)傳遞的多種方式小結(jié)
更新時(shí)間：2025年04月25日 11:01:31 作者：vvilkin的學(xué)習(xí)備忘
在 Vue.js 開(kāi)發(fā)中,vue-router 是構(gòu)建單頁(yè)面應(yīng)用（SPA）的核心工具之一,它不僅能幫助我們管理路由,還能在不同頁(yè)面之間傳遞參數(shù),本文將詳細(xì)介紹 vue-router 中常見(jiàn)的參數(shù)傳遞方式,并通過(guò)實(shí)際示例幫助你快速掌握這些技巧,需要的朋友可以參考下
1. 通過(guò) params 傳遞參數(shù)
使用場(chǎng)景
params 是動(dòng)態(tài)路由的一部分，通常用于傳遞一些必需的參數(shù)，比如用戶 ID、產(chǎn)品 ID 等。
示例代碼
定義路由
// router/index.js
const routes = [
{
path: '/user/:id', // 動(dòng)態(tài)路由
name: 'UserDetail',
component: () => import('@/components/UserDetail.vue')
}
];傳遞參數(shù)
<!-- Home.vue -->
<template>
<div>
<button @click="goToUserDetail(123)">查看用戶 123 的詳情</button>
</div>
</template>
<script>
export default {
methods: {
goToUserDetail(userId) {
this.$router.push({ name: 'UserDetail', params: { id: userId } });
}
}
};
</script>獲取參數(shù)
<!-- UserDetail.vue -->
<template>
<div>
<h1>用戶詳情</h1>
<p>用戶 ID: {{ id }}</p>
</div>
</template>
<script>
export default {
computed: {
id() {
return this.$route.params.id; // 獲取動(dòng)態(tài)路由參數(shù)
}
}
};
</script>2. 通過(guò) query 傳遞參數(shù)
使用場(chǎng)景
query 參數(shù)通常用于傳遞可選的參數(shù)，比如分頁(yè)、過(guò)濾條件等。
示例代碼
定義路由
// router/index.js
const routes = [
{
path: '/users',
name: 'UserList',
component: () => import('@/components/UserList.vue')
}
];傳遞參數(shù)
<!-- Home.vue -->
<template>
<div>
<button @click="goToUserList">查看活躍用戶</button>
</div>
</template>
<script>
export default {
methods: {
goToUserList() {
this.$router.push({ path: '/users', query: { filter: 'active' } });
}
}
};
</script>獲取參數(shù)
<!-- UserList.vue -->
<template>
<div>
<h1>用戶列表</h1>
<p>當(dāng)前過(guò)濾條件: {{ filter }}</p>
</div>
</template>
<script>
export default {
computed: {
filter() {
return this.$route.query.filter; // 獲取查詢參數(shù)
}
}
};
</script>3. 通過(guò) props 傳遞參數(shù)
使用場(chǎng)景
將路由參數(shù)作為 props 傳遞給組件，可以使組件更加解耦，便于復(fù)用。
示例代碼
定義路由
// router/index.js
const routes = [
{
path: '/product/:id',
name: 'ProductDetail',
component: () => import('@/components/ProductDetail.vue'),
props: true // 將路由參數(shù)作為 props 傳遞
}
];組件中使用 props
<!-- ProductDetail.vue -->
<template>
<div>
<h1>產(chǎn)品詳情</h1>
<p>產(chǎn)品 ID: {{ id }}</p>
</div>
</template>
<script>
export default {
props: ['id'] // 接收路由參數(shù)
};
</script>4. 通過(guò) meta 傳遞參數(shù)
使用場(chǎng)景
meta 字段可以用于傳遞一些與路由相關(guān)的元信息，比如權(quán)限驗(yàn)證。
示例代碼
定義路由
// router/index.js
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@/components/Dashboard.vue'),
meta: { requiresAuth: true } // 添加元信息
}
];導(dǎo)航守衛(wèi)中使用 meta
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth(); // 假設(shè)這是一個(gè)檢查登錄狀態(tài)的方法
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login'); // 跳轉(zhuǎn)到登錄頁(yè)
} else {
next(); // 繼續(xù)導(dǎo)航
}
});5. 通過(guò) hash 傳遞參數(shù)
使用場(chǎng)景
hash 通常用于頁(yè)面內(nèi)的錨點(diǎn)導(dǎo)航，但也可以用于傳遞一些簡(jiǎn)單的參數(shù)。
示例代碼
傳遞參數(shù)
<!-- Home.vue -->
<template>
<div>
<button @click="goToSection">跳轉(zhuǎn)到簡(jiǎn)介部分</button>
</div>
</template>
<script>
export default {
methods: {
goToSection() {
this.$router.push({ path: '/about', hash: '#intro' });
}
}
};
</script>獲取 hash
<!-- About.vue -->
<template>
<div>
<h1>關(guān)于我們</h1>
<div id="intro">
<h2>簡(jiǎn)介</h2>
<p>這里是簡(jiǎn)介內(nèi)容。</p>
</div>
</div>
</template>
<script>
export default {
mounted() {
if (this.$route.hash === '#intro') {
// 滾動(dòng)到簡(jiǎn)介部分
const element = document.getElementById('intro');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
}
};
</script>總結(jié)
在 vue-router 中，參數(shù)傳遞的方式多種多樣，每種方式都有其適用的場(chǎng)景：
params: 適合傳遞動(dòng)態(tài)路由參數(shù)，如用戶 ID、產(chǎn)品 ID 等。query: 適合傳遞可選參數(shù)，如過(guò)濾條件、分頁(yè)信息等。props: 將路由參數(shù)作為props傳遞，使組件更解耦。meta: 用于傳遞路由的元信息，如權(quán)限驗(yàn)證。hash: 用于頁(yè)面內(nèi)跳轉(zhuǎn)或傳遞簡(jiǎn)單參數(shù)。
通過(guò)靈活運(yùn)用這些方式，你可以更好地管理 Vue.js 應(yīng)用中的路由和參數(shù)傳遞。希望本文的示例和講解能幫助你更高效地使用 vue-router！
以上就是Vue Router參數(shù)傳遞的多種方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue Router參數(shù)傳遞的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作
這篇文章主要介紹了Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI)
本文主要介紹了Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載
對(duì)于現(xiàn)在前端插件的頻繁更新，我也是無(wú)力吐槽，但是既然入了前端的坑就得認(rèn)嘛，所以多多少少要對(duì)組件化有點(diǎn)了解，下面這篇文章主要給大家介紹了在Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載的相關(guān)資料，需要的朋友可以參考下。2017-02-02
vue 在服務(wù)器端直接修改請(qǐng)求的接口地址
這篇文章主要介紹了vue 在服務(wù)器端直接修改請(qǐng)求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue/cli?配置動(dòng)態(tài)代理無(wú)需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，分為vue?init?webpack-simple?項(xiàng)目名和vue?init?webpack?項(xiàng)目名兩種，這篇文章主要介紹了vue/cli?配置動(dòng)態(tài)代理，無(wú)需重啟服務(wù),需要的朋友可以參考下2022-05-05
Vue遞歸實(shí)現(xiàn)樹(shù)形菜單方法實(shí)例
學(xué)習(xí)vue有一段時(shí)間了，最近使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，下面這篇文章主要給大家介紹了關(guān)于Vue利用遞歸實(shí)現(xiàn)樹(shù)形菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-11-11
VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例
本篇文章主要介紹了VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了為什么推薦使用JSX開(kāi)發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
本文將對(duì)于Vue 2.5.3版本中使用的Virtual Dom進(jìn)行分析。updataChildren是Diff算法的核心，所以本文對(duì)updataChildren進(jìn)行了圖文的分析。下面通過(guò)本文給大家分享Vue 2.5的Diff算法，需要的朋友參考下吧2017-11-11