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 页面中正常获取路由参数即可

相关推荐
baiduopenmap10 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish17 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull21 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i30 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_32 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun38 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜41 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html