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

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

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

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);
相关推荐
uncleTom6665 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥8 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF19 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man21 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬23 分钟前
理解JS事件环(Event Loop)
前端·javascript
盏茶作酒2939 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js