Vue Router 路由跳转传参实践

訾博ZiBo

发布于 2025-01-06 19:29:20

6200

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

Vue Router 路由跳转传参实践

一、动态路由匹配

1、路由配置

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Hello',
    component: Hello,
  },
  {
      path: '/next-page/:message',
      name: 'NextPage',
      component: NextPage,
  },
];

2、当前组件：传参

<template>
  <button @click="toNextPage">toNextPage</button>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router';
// 得到 router 对象
const router = useRouter();
// 页面跳转
const toNextPage = () => {
  router.push({name: 'NextPage', params: {message: "基本字符串"}});
}
</script>

3、跳转目标组件：接收参数

<template>
  <h1>NextPage</h1>
  <h1>基本数据：{{ route.params.message }}</h1>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import {onMounted} from "vue";
const route = useRoute();
</script>

4、运行结果

5、路由嵌套刷新页面策略

<template>
  <h1>NextPage</h1>
  <h1 :key="thisVersion">基本数据：{{ route.params.message }}</h1>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import {ref, watch} from "vue";
const route = useRoute();
// 当前版本
const thisVersion = ref(0);
// 监听参数变化，更新版本，刷新组件（大致写法，未测试）
watch(() => route.params.message, () => {
  thisVersion.value ++;
})
</script>

二、查询参数

1、路由配置

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Hello',
    component: Hello,
  },
  {
      path: '/next-page',
      name: 'NextPage',
      component: NextPage,
  },
];

2、当前组件：传参

<template>
  <button @click="toNextPage">toNextPage</button>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router';
// 得到 router 对象
const router = useRouter();
// 页面跳转
const toNextPage = () => {
  router.push({name: 'NextPage', query: {message: "基本字符串", name: "訾博"}});
}
</script>

3、跳转目标组件：接收参数

<template>
  <h1>NextPage</h1>
  <h1>基本数据：{{ route.query.message }}</h1>
  <h1>基本数据：{{ route.query.name }}</h1>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
</script>