快捷導(dǎo)航

Vue3路由跳轉(zhuǎn)并傳遞參數(shù)的應(yīng)用場景分析

更新時(shí)間：2025年05月30日 10:36:42 作者：聶?可?以

本文主要介紹在Vue3工程使用setup語法中如何進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1. 前言

路由跳轉(zhuǎn)并傳遞參數(shù)的應(yīng)用十分廣泛，以下是一些常見的應(yīng)用場景：

商品詳情頁：當(dāng)用戶在商品列表頁點(diǎn)擊一個(gè)商品時(shí)，通常會(huì)跳轉(zhuǎn)到該商品的詳情頁。可以將商品的ID作為參數(shù)傳遞給商品詳情頁，商品詳情頁組件就能夠根據(jù)商品ID獲取到商品的詳細(xì)信息
視頻詳情頁：當(dāng)用戶在視頻列表頁點(diǎn)擊一個(gè)視頻時(shí)，通常會(huì)跳轉(zhuǎn)到該視頻的詳情頁?？梢詫⒁曨l的ID作為參數(shù)傳遞給視頻詳情頁，視頻詳情頁組件就能夠根據(jù)視頻ID獲取到視頻的詳細(xì)信息
用戶個(gè)人資料頁：在用戶點(diǎn)擊查看或編輯個(gè)人資料時(shí)，路由會(huì)跳轉(zhuǎn)到個(gè)人資料頁，并向個(gè)人資料頁面?zhèn)鬟f用戶的ID或者其它唯一標(biāo)識(shí)符，個(gè)人資料頁組件可以根據(jù)這個(gè)參數(shù)來獲取用戶的個(gè)人信息
文章閱讀頁：當(dāng)用戶點(diǎn)擊一個(gè)文章標(biāo)題或摘要時(shí)，應(yīng)用會(huì)將用戶帶到文章閱讀頁。在這個(gè)過程中，文章的ID或其他唯一標(biāo)識(shí)符會(huì)作為參數(shù)傳遞，文章閱讀頁組件就可以根據(jù)這個(gè)參數(shù)獲取相應(yīng)的文章內(nèi)容
搜索結(jié)果頁：用戶在搜索框輸入關(guān)鍵詞后，通常會(huì)跳轉(zhuǎn)到搜索結(jié)果頁?？梢詫⑺阉麝P(guān)鍵詞作為參數(shù)傳遞給搜索結(jié)果頁，頁面組件會(huì)根據(jù)這個(gè)參數(shù)來請求和展示相關(guān)的搜索結(jié)果

本文主要介紹在Vue3工程（使用 setup 語法）中如何進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù)

2. 準(zhǔn)備工作

2.1 編寫路由規(guī)則

在src/router/index.js文件中編寫路由規(guī)則

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: 'homeView',
      component: HomeView
    },
    {
      path: '/sourceView',
      name: 'sourceView',
      component: () => import('@/views/SourceView.vue')
    },
    {
      path: '/targetView',
      name: 'targetView',
      component: () => import('@/views/TargetView.vue')
    }
  ]
})
export default router

2.2 源頁面

src/views/SourceView.vue

<template>
  <div>
    <h1>源頁面</h1>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

2.3 目標(biāo)頁面

src/views/TargetView.vue

<template>
  <div>
    <h1>目標(biāo)頁面</h1>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

3. 源頁面如何傳遞參數(shù)給目標(biāo)頁面

3.1 通過 router-link 標(biāo)簽傳遞參數(shù)（很少使用）

在路徑后面添加需要傳遞的參數(shù)，如果需要傳遞多個(gè)參數(shù)，多個(gè)參數(shù)之間用&符號(hào)隔開

template部分（to屬性前面記得加上:）

<router-link :to="`/targetView?username=${username}&gender=${gender}`">跳轉(zhuǎn)到目標(biāo)頁面</router-link>

script部分

const username = ref('zhangsan')const gender = ref(1)

3.2 通過 js 代碼傳遞參數(shù)（經(jīng)常使用）

template部分

<button @click="jumpToTargetView">跳轉(zhuǎn)到目標(biāo)頁面</button>

script部分

import router from '@/router/index.js'
import {ref} from 'vue'
const username = ref('zhangsan')
const gender = ref(1)
const jumpToTargetView = () => {
  router.push({
    path: '/targetView',
    query: {
      username: username.value,
      gender: gender.value
    }
  })
}

4. 目標(biāo)頁面接收源頁面?zhèn)鬟f過來的參數(shù)

template部分

用戶名：{{ username }}
<hr>
性別：{{ gender }}

script部分（在onMounted鉤子函數(shù)中編寫接收參數(shù)的代碼）

import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
const route = useRoute()
const username = ref('')
const gender = ref(1) // 1男 2女
onMounted(() => {
  username.value = route.query.username
  gender.value = route.query.gender
})

5. 完整的示例代碼

src/views/SourceView.vue

<template>
  <div>
    <h1>源頁面</h1>
    <!--通過router-link標(biāo)簽跳轉(zhuǎn)-->
    <router-link :to="`/targetView?username=${username}&gender=${gender}`">跳轉(zhuǎn)到目標(biāo)頁面</router-link>
    <!--通過js代碼跳轉(zhuǎn)-->
    <button @click="jumpToTargetView">跳轉(zhuǎn)到目標(biāo)頁面</button>
  </div>
</template>
<script setup>
import router from '@/router/index.js'
import {ref} from 'vue'
const username = ref('zhangsan')
const gender = ref(1)
const jumpToTargetView = () => {
  router.push({
    path: '/targetView',
    query: {
      username: username.value,
      gender: gender.value
    }
  })
}
</script>
<style scoped>
</style>

src/views/TargetView.vue

<template>
  <div>
    <h1>目標(biāo)頁面</h1>
    用戶名：{{ username }}
    <hr>
    性別：{{ gender }}
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
const route = useRoute()
const username = ref('')
const gender = ref(1) // 1男 2女
onMounted(() => {
  username.value = route.query.username
  gender.value = route.query.gender
})
</script>
<style scoped>
</style>

到此這篇關(guān)于Vue3路由跳轉(zhuǎn)并傳遞參數(shù)的應(yīng)用場景分析的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)傳遞參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: