Vue3获取路由参数、包含获取路径参数

如果是通过url传参 可直接在组件内使用

复制代码
/url?id=1&name=2

route为路由信息 query为获取的路由参数

复制代码
import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.query)

如果参数直接在路径中 可参考路由的匹配语法 | Vue Router (vuejs.org)

这里举例

复制代码
/url/123/456

这里业务逻辑为 跳转到url页面 同时接收到123和456参数

需在路由表中对 url路由 进行修改

复制代码
  {
    path: '/u/:id/:name',
    redirect: (to: any) => {
      return {
        path: '/url',
        query: {
          id: to.params.id,
          name: to.params.name,
        },
      };
    },
  },
  {
    path: '/url',
    component: () => import('@/pages/url/index.vue'),
  },

该条路由表信息使用了重定向 如实际项目不需要 则按需修改 一条路由也可实现

该demo使用了重定向 把123和456 分别设置为id和name 通过路由传参 传递给重定向后的 url 路由

此时 通过访问

复制代码
u/123/456

重定向后实际访问为

复制代码
/user?id=123&name=456

在 url 页面中正常获取路由参数即可

相关推荐
鱼樱前端1 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig2 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix2 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易2 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript