一、若依框架开发手册方法

若依开发手册官网网址：http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#%E5%A6%82%E4%BD%95%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82

Vue设置路由跳转的两种方法

一、路由跳转router.push

// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query，地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query，地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params，地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})
// 其他方式
this.$router.push({ path: "/system/user" });

二、动态赋值，to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
// 其他方式
<router-link :to="'/system/user/' + scope.row.userId" class="link-type"><span>{{ scope.row.userId }}</span>
</router-link>

如何手动配置路由传参

第一种：使用path来匹配路由，然后通过query来传递参数，这种情况下query传递的参数会显示在url后面会跟?id=

this.$router.push({path: '/user/profile',query: {id: id}
})获取参数方式：this.$route.query.id

第二种：使用name来匹配路由，使用params传参，可以在路由的path里加参数。

this.$router.push({name: 'UserProfile',params: {id: id}
})获取参数方式：this.$route.params.id

第三种：直接让路由携带参数跳转

this.$router.push({path: '/user/profile/:id(\\d+)'
})获取参数方式：this.$route.params.id

如何菜单配置路由传参

在菜单管理中选择菜单类型为菜单，填写对应的路由参数，如：{"id": 1, "name": "ry"}
在自己的组件中获取参数方式：this.$route.query.id，this.$route.query.name
外链可以通过原生方式设置，例如：http://ruoyi.vip?id=1&name=ry

二、我的实践

在views新建vue文件

如下右键新建component，取名showarticle

在router/index.js注册路由

代码如下：
path是路由路径，component是组件文件路径。这样就可以通过跳转路由路径访问了。

{//自己添加的公开路由页面，不要添加在动态路由中！path: '/article/studentarticle/showarticle',component: () => import('@/views/article/studentarticle/showarticle'),name: showarticle,hidden: true,},

若依框架二次开发之创建新路由相关推荐

NX二次开发-UFUN创建圆柱UF_MODL_create_cyl1
NX二次开发-UFUN创建圆柱UF_MODL_create_cyl1 NX9+VS2012#include <uf.h> #include <uf_modl.h> #inclu ...
NX二次开发-UFUN创建工程图注释UF_DRF_create_note
NX二次开发-UFUN创建工程图注释UF_DRF_create_note NX9+VS2012#include <uf.h> #include <uf_drf.h> #incl ...
NX二次开发 UFUN创建倒角特征 UF_MODL_create_chamfer
NX二次开发 UFUN创建倒角特征 UF_MODL_create_chamfer #include <UF_MODL.h>//创建块(创建长方体) bool CreateBlock(con ...
pytest框架二次开发之自定义注解
目录一.背景: 二.闭包与装饰器(可以跳过这一章) 2.1 .什么是闭包 2.2 闭包的用途 2.3 .装饰器(decorator) 三.pytest自定义注解@author 3.1 自定义注解@a ...
c# CAD二次开发类库创建各种图形、直线、圆、多段线、正方形、点等
c# CAD二次开发类库创建各种图形.直线.圆.多段线.正方形.点等 using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD ...
NX二次开发-UFUN创建图纸注释uc5540
NX二次开发-UFUN创建图纸注释uc5540 NX9+VS2012#include <uf.h> #include <uf_drf.h>UF_initialize();//创 ...
NX二次开发-UFUN创建扫掠UF_MODL_create_sweep
NX二次开发-UFUN创建扫掠UF_MODL_create_sweep 这个函数挺复杂的,我也是参考别人去做的.但是我还是没有做出来多段引导线的. 我们在做钻头螺旋槽的时候,一般都是拿一个封闭截面,三 ...
NX二次开发-UFUN创建圆锥UF_MODL_create_cone1
NX二次开发-UFUN创建圆锥UF_MODL_create_cone1 NX11+VS2013#include <uf.h> #include <uf_modl.h>UF_in ...
NX二次开发 UFUN创建图纸尺寸表达式抑制 UF_DRF_add_controlling_exp
NX二次开发 UFUN创建图纸尺寸表达式抑制 UF_DRF_add_controlling_exp NX8.0+VS2010#include <uf.h> #include <uf_ ...

若依框架二次开发之创建新路由

文章目录