vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue路由跳转传递参数

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

作者：聂 可 以

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

1. 前言

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

本文主要介绍在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路由跳转传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文