Vue Router 路由跳转传参实践

╰+哭是因爲堅強的太久メ 2023-09-26 20:27 165阅读 0赞

## 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、运行结果 ###

![image-20230415164331534][]

### 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、运行结果 ###

![image-20230415165257246][]

[image-20230415164331534]: https://img-blog.csdnimg.cn/img_convert/459a816e77f00104b2d13b51de6d9241.png
[image-20230415165257246]: https://img-blog.csdnimg.cn/img_convert/52881dbcc7a893213a46bb7dd1e0d9c4.png