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

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

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

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);
相关推荐
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue