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

---

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

若依开发手册官网网址：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,
  },