脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 vue-router传递路由参数

vue3 vue-router传递路由参数实战案例

 更新时间：2025年06月04日 10:13:17   作者：米粒宝的爸爸  
在Vue3中vue-router是Vue.js官方的路由管理器,用于构建单页面应用程序,这篇文章主要给大家介绍了关于vue3 vue-router传递路由参数的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

在 Vue 3 中，使用 vue-router 传递路由参数是非常常见的需求。

1. 使用动态路由参数（params）

动态路由参数是定义在路由规则中的占位符部分，例如 /user/:id。你可以通过 router.push 或 <router-link> 传递这些参数。

(1) 配置动态路由

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user/:id', // 动态参数 :id
    component: () => import('@/views/UserDetail.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

(2) 通过 router.push 传递参数 

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToUser = (userId) => {
      router.push({ name: 'user', params: { id: userId } }); // 传递参数
    };

    return { navigateToUser };
  }
};

(3) 在目标组件中获取参数

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id; // 获取动态参数

    return { userId };
  }
};

2. 使用查询参数（query）

查询参数是 URL 中 ? 后面的部分，例如 /search?name=Vue&id=123。你可以通过 router.push 或 <router-link> 传递查询参数。

(1) 通过 router.push 传递查询参数

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToSearch = () => {
      router.push({
        path: '/search',
        query: { name: 'Vue', id: 123 } // 传递查询参数
      });
    };

    return { navigateToSearch };
  }
};

(2) 在目标组件中获取查询参数

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const name = route.query.name; // 获取查询参数
    const id = route.query.id;

    return { name, id };
  }
};

3. 使用命名路由（推荐）

如果你的路由配置中定义了 name 属性，可以通过命名路由传递参数，这样可以避免硬编码路径。

(1) 定义命名路由

const routes = [
  {
    path: '/user/:id',
    name: 'user', // 定义路由名称
    component: () => import('@/views/UserDetail.vue')
  }
];

(2) 通过 router.push 使用命名路由传递参数

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToUser = (userId) => {
      router.push({
        name: 'user', // 使用路由名称
        params: { id: userId } // 传递动态参数
      });
    };

    return { navigateToUser };
  }
};

4. 使用 <router-link> 传递参数

除了编程式导航（router.push），你还可以通过 <router-link> 传递参数。

(1) 传递动态参数

<template>
  <router-link :to="{ name: 'user', params: { id: 123 } }">
    跳转到用户详情页
  </router-link>
</template>

(2) 传递查询参数

<template>
  <router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">
    跳转到搜索页
  </router-link>
</template>

5. 区分动态参数和查询参数

类型位置示例 URL获取方式
动态参数 (params)路径中/user/123route.params.id
查询参数 (query)URL 的 ? 后/search?name=Vue&id=123route.query.name

6. 注意事项

  • 动态参数会被移除

    • 如果你在导航时切换了路由，但没有重新设置动态参数，那么参数会被清除。
    • 解决方法：确保在导航时重新传递参数，或者使用 watch 监听 route.params 的变化。

  • 查询参数不会被移除

    • 查询参数会保留在 URL 中，直到你手动清除或覆盖它们。

  • 强制刷新页面时丢失参数

    • 如果用户刷新页面，动态参数和查询参数仍然可以从 route.params 和 route.query 中获取。

7. 完整示例

路由配置

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: () => import('@/views/UserDetail.vue')
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('@/views/SearchPage.vue')
  }
];

导航组件

<template>
  <div>
    <!-- 传递动态参数 -->
    <router-link :to="{ name: 'user', params: { id: 123 } }">
      查看用户详情
    </router-link>

    <!-- 传递查询参数 -->
    <router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">
      搜索内容
    </router-link>
  </div>
</template>

接收参数的目标组件

<template>
  <div>
    <p>用户 ID: {{ userId }}</p>
    <p>查询参数 Name: {{ name }}</p>
    <p>查询参数 ID: {{ id }}</p>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id; // 获取动态参数
    const name = route.query.name; // 获取查询参数
    const id = route.query.id;

    return { userId, name, id };
  }
};
</script>

总结

  • 动态参数：适合用于 URL 中明确标识资源的情况，例如 /user/123。
  • 查询参数：适合用于可选参数或过滤条件，例如 /search?name=Vue&id=123。
  • 命名路由：推荐使用命名路由，避免硬编码路径。

到此这篇关于vue3 vue-router传递路由参数的文章就介绍到这了,更多相关vue3 vue-router传递路由参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 基于Electron24+Vite4+Vue3搭建桌面端应用实战教程

    基于Electron24+Vite4+Vue3搭建桌面端应用实战教程

    这篇文章主要介绍了基于Electron24+Vite4+Vue3搭建桌面端应用,这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序，需要的朋友可以参考下
    2023-05-05
  • Vue3中使用富文本编辑器的方法详解

    Vue3中使用富文本编辑器的方法详解

    这篇文章主要为大家详细介绍了如何在Vue3中使用富文本编辑器,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下
    2024-01-01
  • Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析

    Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析

    这篇文章主要介绍了Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue2和Vue3中常用组件通信用法分享

    Vue2和Vue3中常用组件通信用法分享

    这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，值得收藏
    2023-04-04
  • element表单使用校验之校验失效问题详解

    element表单使用校验之校验失效问题详解

    最近工作中遇到了element表单校验失败的情况,通过查找相关资料终于解决了,所以下面这篇文章主要给大家介绍了关于element表单使用校验之校验失效问题的相关资料,需要的朋友可以参考下
    2022-10-10
  • VUE父组件异步获取数据,子组件接收的值为空的问题

    VUE父组件异步获取数据,子组件接收的值为空的问题

    这篇文章主要介绍了VUE父组件异步获取数据,子组件接收的值为空的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue之计算属性的缓存computed的用法解读

    vue之计算属性的缓存computed的用法解读

    这篇文章主要介绍了vue之计算属性的缓存computed的用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-11-11
  • 实例详解vue中的$root和$parent

    实例详解vue中的$root和$parent

    这篇文章主要介绍了vue中的$root和$parent ，本文通过文字实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue3+Echarts常用属性之折线图详解

    Vue3+Echarts常用属性之折线图详解

    该文章主要介绍了如何在Vue3项目中使用ECharts图表库,并列举了折线图的示例代码和常用属性,如X轴刻度设置、折线图样式和颜色配置、tooltip显示、选中状态设置、添加单位和名称、数据缩放等
    2025-10-10
  • 实用的Vue开发技巧

    实用的Vue开发技巧

    这篇文章主要介绍了7个实用的Vue开发技巧文。中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面我们来一起学习一下吧
    2019-05-05

最新评论