快捷導(dǎo)航

詳解Vue如何通過URL傳遞與獲取參數(shù)

更新時(shí)間：2024年09月24日 09:26:41 作者：pan_junbiao

Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來實(shí)現(xiàn),在實(shí)際的開發(fā)中,經(jīng)常需要通過URL來傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過 URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下

前言

Vue Router 路由實(shí)際上就是一種映射關(guān)系。例如，多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來實(shí)現(xiàn)。在切換時(shí)，根據(jù)鼠標(biāo)的點(diǎn)擊事件顯示不同的頁面內(nèi)容，這相當(dāng)于事件和事件處理程序之間的映射關(guān)系。在實(shí)際的開發(fā)中，經(jīng)常需要通過URL來傳遞參數(shù)，同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù)。下面將介紹 Vue 項(xiàng)目中，如何通過 URL 對(duì)參數(shù)進(jìn)行傳遞與獲取。

1、傳遞 URL 參數(shù)

（1）配置路由信息：

const routes = [
  {
    path: '/course/detail/:id',
    name: 'courseDetail',
    component: CourseDetail,
    meta: {
      title: '課程詳情'
    }
  }
]

該路由配置的 path 值為： '/course/detail/:id'，其中 :id 為參數(shù)的占位符，需要通過 params:{} 方式賦值。有效地址例如：/course/detail/1 或者 /course/detail/2 等。

（2）URL參數(shù)的傳遞：

<router-link :to="{ name: 'courseDetail', params: { id: course.id }, query: { name: course.name, teacher: course.teacher } }">預(yù)覽</router-link>

該路由配置的 path 值為： '/course/detail/:id'，其中 :id 為參數(shù)的占位符，需要通過 params:{} 方式賦值。有效地址例如：/course/detail/1 或者 /course/detail/2 等。

（2）URL參數(shù)的傳遞：

<router-link :to="{ name: 'courseDetail', params: { id: course.id }, query: { name: course.name, teacher: course.teacher } }">預(yù)覽</router-link>

參數(shù)說明：

params 參數(shù)：會(huì)在URL中顯示出傳參的值，刷新頁面不會(huì)丟失參數(shù)，使用該方式傳值的時(shí)候，需要在路由提前配置好參數(shù)，如上述代碼：path: '/course/detail/:id'，其中 :id 為參數(shù)的占位符。

query 參數(shù)：傳遞的參數(shù)會(huì)拼接在地址欄中（?name=xxx&teacher=xxx），刷新頁面不會(huì)丟失參數(shù)，使用 path 和 name 都可以。

執(zhí)行結(jié)果：

2、獲取 URL 參數(shù)

（1）模板中獲取URL參數(shù)：

<!-- 獲取 params 對(duì)象中的參數(shù) -->
<p>課程編號(hào)：{{ $route.params.id }}</p>
 
<!-- 獲取 query 對(duì)象中的參數(shù) -->
<p>課程名稱：{{ $route.query.name }}</p>
<p>課程講師：{{ $route.query.teacher }}</p>

（2）JavaScript 中獲取URL參數(shù)（Vue 2.0）：

this.id = this.$route.params.Id || 0; //獲取 params 對(duì)象中的參數(shù)
this.name = this.$route.query.name;   //獲取 query 對(duì)象中的參數(shù)

（3）JavaScript 中獲取URL參數(shù)（Vue 3.0 ）：

import { useRoute } from 'vue-router';
 
//獲取URL參數(shù)
const route = useRoute();
let id = route.params.id || 0; //獲取 params 對(duì)象中的參數(shù)
let name = route.query.name;   //獲取 query 對(duì)象中的參數(shù)
let teacher = route.query.teacher;
 
//打印參數(shù)
console.log("獲取URL參數(shù)id:", id);
console.log("獲取URL參數(shù)name:", name);
console.log("獲取URL參數(shù)teacher:", teacher);

執(zhí)行結(jié)果：