快捷導(dǎo)航

Vue Router中獲取路由傳遞過(guò)來(lái)的參數(shù)(方法詳解)

更新時(shí)間：2025年02月06日 16:08:25 作者：Kris-L-

在VueRouter中,可以通過(guò)動(dòng)態(tài)路由匹配和查詢參數(shù)`query`來(lái)傳遞參數(shù),并將路由參數(shù)或查詢參數(shù)作為組件的`props`傳遞,動(dòng)態(tài)路由匹配使用`route.params`訪問(wèn)參數(shù),查詢參數(shù)使用`route.query`訪問(wèn),本文給大家介紹Vue Router中獲取路由傳遞過(guò)來(lái)的參數(shù),感興趣的朋友一起看看吧

1. 動(dòng)態(tài)路由匹配

如果在路由配置中使用了動(dòng)態(tài)路由(如/user/:id)，則可以通過(guò)route.params.id獲取該參數(shù)。

// 路由配置
const routes = [
  { path: '/user/:id', component: User }
];
// 組件中獲取參數(shù)
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.params.id;
</script>

2. 查詢參數(shù)query

如果URL中有查詢字符串(如/user?id=123)或路由跳轉(zhuǎn)時(shí)寫(xiě)了query【如router.push({path: ‘/user’,query: { id: 123}});】，則可以通過(guò)route.query.id獲取該參數(shù)。

// 路由配置
const routes = [
  { path: '/user', component: User }
];
// 組件中獲取參數(shù)
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.query.id;
</script>

3. 通過(guò) props 傳遞參數(shù)

在路由配置中啟用 props，并將 params 作為 props 傳遞。

// 路由配置
const routes = [
  { path: '/user/:id', component: User, props: true }
];
// 組件中通過(guò) props 獲取參數(shù)
<script setup>
import { defineProps, onMounted } from 'vue';
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});
onMounted(() => {
  console.log(props.id);
});
</script>

通過(guò) props 傳遞查詢參數(shù)。

// 路由配置
const routes = [
  { path: '/user', component: User, props: (route) => ({ id: route.query.id }) }
];
// 組件中通過(guò) props 獲取參數(shù)
<script setup>
import { defineProps, onMounted } from 'vue';
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});
onMounted(() => {
  console.log(props.id);
});
</script>

到此這篇關(guān)于Vue Router中獲取路由傳遞過(guò)來(lái)的參數(shù)(方法詳解)的文章就介紹到這了,更多相關(guān)Vue Router路由參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決VUE的對(duì)話框el-dialog點(diǎn)擊外部消失問(wèn)題
這篇文章主要介紹了解決VUE的對(duì)話框el-dialog點(diǎn)擊外部消失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vite+Vue3使用MockJS的實(shí)現(xiàn)示例
寫(xiě)一些純前端的項(xiàng)目時(shí),自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡(jiǎn)單的數(shù)據(jù),來(lái)滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實(shí)現(xiàn)示例,感興趣的可以了解一下
2024-01-01
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
VSCode使用之Vue工程配置eslint
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
關(guān)于找到任意組件實(shí)例的方法
這篇文章主要介紹了關(guān)于找到任意組件實(shí)例的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue中Key唯一標(biāo)識(shí)作用小結(jié)
key是虛擬DOM的導(dǎo)航儀,通過(guò)唯一標(biāo)識(shí)節(jié)點(diǎn),提高DOM更新效率,不綁定key或使用不穩(wěn)定的key會(huì)導(dǎo)致組件狀態(tài)錯(cuò)亂、性能下降,甚至崩潰,下面就來(lái)介紹一下Vue中Key唯一標(biāo)識(shí)作用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2026-02-02
解決Vue-cli npm run build生產(chǎn)環(huán)境打包,本地不能打開(kāi)的問(wèn)題
今天小編就為大家分享一篇解決Vue-cli npm run build生產(chǎn)環(huán)境打包,本地不能打開(kāi)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解vuex中的this.$store.dispatch方法
這篇文章主要介紹了vuex中的this.$store.dispatch方法,必須要用commit(‘SET_TOKEN’,?tokenV)調(diào)用mutations里的方法，才能在store存儲(chǔ)成功，需要的朋友可以參考下
2022-11-11
基于WebRTC實(shí)現(xiàn)音視頻通話功能
WebRTC作為一種開(kāi)放標(biāo)準(zhǔn)的實(shí)時(shí)通信協(xié)議,能輕松實(shí)現(xiàn)瀏覽器之間的實(shí)時(shí)音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過(guò)案例實(shí)踐,帶大家掌握如何搭建一個(gè)音視頻通話應(yīng)用,需要的朋友可以參考下
2024-05-05
mpvue構(gòu)建小程序的方法(步驟+地址)
mpvue是一個(gè)使用Vue.js開(kāi)發(fā)小程序的前端框架。框架基于 Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05