Vue3路由跳转并传递参数的应用场景分析

更新时间：2025年05月30日 10:36:42 作者：聂可以

本文主要介绍在Vue3工程使用setup语法中如何进行路由跳转并传递参数,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1. 前言

路由跳转并传递参数的应用十分广泛，以下是一些常见的应用场景：

商品详情页：当用户在商品列表页点击一个商品时，通常会跳转到该商品的详情页。可以将商品的ID作为参数传递给商品详情页，商品详情页组件就能够根据商品ID获取到商品的详细信息
视频详情页：当用户在视频列表页点击一个视频时，通常会跳转到该视频的详情页。可以将视频的ID作为参数传递给视频详情页，视频详情页组件就能够根据视频ID获取到视频的详细信息
用户个人资料页：在用户点击查看或编辑个人资料时，路由会跳转到个人资料页，并向个人资料页面传递用户的ID或者其它唯一标识符，个人资料页组件可以根据这个参数来获取用户的个人信息
文章阅读页：当用户点击一个文章标题或摘要时，应用会将用户带到文章阅读页。在这个过程中，文章的ID或其他唯一标识符会作为参数传递，文章阅读页组件就可以根据这个参数获取相应的文章内容
搜索结果页：用户在搜索框输入关键词后，通常会跳转到搜索结果页。可以将搜索关键词作为参数传递给搜索结果页，页面组件会根据这个参数来请求和展示相关的搜索结果

本文主要介绍在Vue3工程（使用 setup 语法）中如何进行路由跳转并传递参数

2. 准备工作

2.1 编写路由规则

在src/router/index.js文件中编写路由规则

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. 源页面如何传递参数给目标页面

3.1 通过 router-link 标签传递参数（很少使用）

在路径后面添加需要传递的参数，如果需要传递多个参数，多个参数之间用&符号隔开

template部分（to属性前面记得加上:）

<router-link :to="`/targetView?username=${username}&gender=${gender}`">跳转到目标页面</router-link>

script部分

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

3.2 通过 js 代码传递参数（经常使用）

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. 目标页面接收源页面传递过来的参数

template部分

用户名：{{ username }}
<hr>
性别：{{ gender }}

script部分（在onMounted钩子函数中编写接收参数的代码）

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路由跳转并传递参数的应用场景分析的文章就介绍到这了,更多相关Vue路由跳转传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中如何给Window对象添加方法
这篇文章主要介绍了Vue中如何给Window对象添加方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
深入理解Vue-cli4路由配置
Vue-router是Vue官方的路由插件，本文将结合实例代码，介绍Vue-cli4路由配置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue如何给element-ui中的el-tabs动态设置label属性
这篇文章主要介绍了vue如何给element-ui中的el-tabs动态设置label属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3中的watch()的用法和具体作用
这篇文章主要介绍了vue3中的watch()的用法和具体作用,通过合理和熟练使用watch()方法，开发者可以更加高效地完成前端开发工作，需要的朋友可以参考下
2023-04-04
vue开发中如何在js文件里使用pinia和组件同步
在JavaScript文件中封装涉及到使用Pinia的方法时,发现Pinia和组件内容并不同步,二者的状态是独立的,解决办法是,在新建对象的时候,将Pinia作为参数传入,本文给大家介绍vue开发中如何在js文件里使用pinia和组件同步,感兴趣的朋友一起看看吧
2024-10-10
Vue中的组件注册方法及注意事项
在Vue中，组件是构建页面的基本单位。通过组件化开发，可以提高代码的复用性和可维护性。组件的注册方法包括全局注册和局部注册两种方式。同时，需要注意组件名的命名规范、组件选项的定义方式、组件之间的通信等问题，以实现更好的组件复用和开发效率
2023-05-05
vite.config.ts与vite.config.js的区别小结
在 Vite 项目中,vite.config.ts 和 vite.config.js 都是 Vite 的配置文件,主要区别在于使用的语言和类型支持,下面就来介绍一下
2025-07-07
Vue.native如何将原生事件绑定到组件
这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue.js源码分析之自定义指令详解
这篇文章主要给大家介绍了关于Vue.js源码分析之自定义指令的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
基于vue3实现一个抽奖小项目
在公司年会期间我做了个抽奖小项目，非常棒，今天把他分享到脚本之家平台，供大家学习参考，对vue3实现抽奖小项目感兴趣的朋友一起看看吧
2023-01-01