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

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

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

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);
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript