若依实现路由跳转功能 动态路由获取参数

若依实现路由跳转功能 动态路由

若依前端中的动态路由参考代码

js 复制代码
动态路由设置:router文件
{
    path: '/system/dict-data',
    component: Layout,
    hidden: true,
    permissions: ['system:dict:list'],
    children: [
      {
        path: 'index/:dictId(\\d+)',
        component: () => import('@/views/system/dict/data'),
        name: 'Data',
        meta: { title: '字典数据', activeMenu: '/system/dict' }
      }
    ]
  },
  
 路由跳转到新页面
      
 <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
               <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
                  <span>{{ scope.row.dictType }}</span>
               </router-link>
            </template>
 </el-table-column>

查看详情的动态路由写法(保证权限控制继续生效)

js 复制代码
{
   path: '/hg/contract-detail',
   component: Layout,
   hidden: true,
   permissions: ['hg:contract:list'],
   children: [
     {
       path: 'index/:id(\\d+)',
       component: () => import('@/views/hg/contract/detail'),
       name: 'detail',
       meta: { title: '查看详情' ,activeMenu: '/hg/contract' }
     }
   ]
 },

动态路由获取参数

js 复制代码
//首先要导入route对象
const route = useRoute();
//通过route.params来获取请求中携带的id,然后再进行下一步操作
getDetail(route.params && route.params.id);
相关推荐
开开心心就好38 分钟前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮1 小时前
【无标题】
开发语言·前端·javascript
谦行2 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊3 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录3 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军3 小时前
React 协调器 render 阶段
前端·react.js·前端框架