Vue Router 路由跳转传参实践

Vue Router 路由跳转传参实践

文章目录

• Vue Router 路由跳转传参实践
• 一、动态路由匹配

• 1、路由配置
• 2、当前组件：传参
• 3、跳转目标组件：接收参数
• 4、运行结果
• 5、路由嵌套刷新页面策略

• 二、查询参数

• 1、路由配置
• 2、当前组件：传参
• 3、跳转目标组件：接收参数
• 4、运行结果

一、动态路由匹配

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>

4、运行结果