Vue3路由跳轉并傳遞參數(shù)的應用場景分析

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

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

1. 前言

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

商品詳情頁：當用戶在商品列表頁點擊一個商品時，通常會跳轉到該商品的詳情頁?？梢詫⑸唐返腎D作為參數(shù)傳遞給商品詳情頁，商品詳情頁組件就能夠根據(jù)商品ID獲取到商品的詳細信息
視頻詳情頁：當用戶在視頻列表頁點擊一個視頻時，通常會跳轉到該視頻的詳情頁。可以將視頻的ID作為參數(shù)傳遞給視頻詳情頁，視頻詳情頁組件就能夠根據(jù)視頻ID獲取到視頻的詳細信息
用戶個人資料頁：在用戶點擊查看或編輯個人資料時，路由會跳轉到個人資料頁，并向個人資料頁面?zhèn)鬟f用戶的ID或者其它唯一標識符，個人資料頁組件可以根據(jù)這個參數(shù)來獲取用戶的個人信息
文章閱讀頁：當用戶點擊一個文章標題或摘要時，應用會將用戶帶到文章閱讀頁。在這個過程中，文章的ID或其他唯一標識符會作為參數(shù)傳遞，文章閱讀頁組件就可以根據(jù)這個參數(shù)獲取相應的文章內容
搜索結果頁：用戶在搜索框輸入關鍵詞后，通常會跳轉到搜索結果頁。可以將搜索關鍵詞作為參數(shù)傳遞給搜索結果頁，頁面組件會根據(jù)這個參數(shù)來請求和展示相關的搜索結果

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

2. 準備工作

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 目標頁面

src/views/TargetView.vue

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

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

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

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

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

<router-link :to="`/targetView?username=${username}&gender=${gender}`">跳轉到目標頁面</router-link>

script部分

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

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

template部分

<button @click="jumpToTargetView">跳轉到目標頁面</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. 目標頁面接收源頁面?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標簽跳轉-->
    <router-link :to="`/targetView?username=${username}&gender=${gender}`">跳轉到目標頁面</router-link>
    <!--通過js代碼跳轉-->
    <button @click="jumpToTargetView">跳轉到目標頁面</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>目標頁面</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>

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

您可能感興趣的文章: