Vue3路由跳转并传递参数

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>