亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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ù),感興趣的朋友一起看看吧

在Vue Router中可以通過(guò)動(dòng)態(tài)路由匹配和查詢參數(shù)query來(lái)傳遞參數(shù)；同時(shí)也可以將路由參數(shù)或查詢參數(shù)作為組件的props傳遞，這樣組件可以直接通過(guò)props來(lái)訪問(wèn)這些參數(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)文章

最新評(píng)論