若依框架中的路由使用

若依框架是通过路由配置来自动生成对应的导航，了解路由的配置项对于项目开发至关重要。本文将详细介绍路由的配置项及其使用方法，并结合若依框架的特点进行说明。

一、路由配置项说明

在若依框架中，路由的配置项可以控制页面的展示、导航行为、权限管理等。以下是常用的路由配置项及其说明：

{
  path: '/system/test',  // 路由路径
  component: Layout,     // 组件布局
  redirect: 'noRedirect', // 面包屑导航中不可点击
  hidden: false,          // 控制路由是否在侧边栏显示
  alwaysShow: true,       // 控制是否总是显示根路由
  meta: {                 // 路由元数据
    title: '系统管理',    // 在侧边栏和面包屑中展示的名字
    icon: 'system'        // 路由图标，可以是SVG或Element UI图标
  },
  children: [
    {
      path: 'index',      // 子路由路径
      component: (resolve) => require(['@/views/index'], resolve), // 组件路径
      name: 'Test',       // 路由名称
      meta: {
        title: '测试管理', // 子路由标题
        icon: 'user'      // 子路由图标
      }
    }
  ]
}

1. hidden：是否在侧边栏中显示

• 类型: Boolean
• 默认值: false
• 说明: 当设置为 true 时，该路由不会在侧边栏出现，常用于 401、login 等页面。

2. redirect：重定向路径

• 类型: String
• 说明: 设置为 'noRedirect' 时，该路由在面包屑导航中不可点击。

3. alwaysShow：总是显示根路由

• 类型: Boolean
• 默认值: false
• 说明: 当 children 路由多于一个时，自动变为嵌套路由；若设置为 true，不论 children 路由数量，都会显示根路由。

4. name：路由名称

• 类型: String
• 说明: 路由的名字，必须填写，否则使用 <keep-alive> 时会出现问题。

5. query：默认传递的参数

• 类型: Object
• 说明: 路由默认传递的参数，如 {"id": 1, "name": "ry"}。

6. roles 和 permissions：路由访问的权限设置

• roles 类型: Array
• permissions 类型: Array
• 说明: 设置访问路由的角色或权限，支持多个权限判断。

7. meta：路由元信息

• 类型: Object
• 说明: 包含以下子属性：
  • title: 在侧边栏和面包屑中展示的名字。
  • icon: 设置路由的图标，支持 SVG 和 Element UI 图标。
  • noCache: 如果设置为 true，则不会被 <keep-alive> 缓存。
  • breadcrumb: 如果设置为 false，则不会在面包屑中显示。
  • affix: 如果设置为 true，则会固定在 tags-view 中。
  • activeMenu: 设置该属性可以高亮侧边栏中的某个菜单项。

二、静态路由与动态路由

1. 静态路由

静态路由代表那些不需要动态判断权限的路由，如登录页、404 等通用页面。在 @/router/index.js 文件中配置。

// @/router/index.js
const routes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  ...
]

2. 动态路由

动态路由根据用户的角色权限动态加载，需要在 @/store/modules/permission.js 中通过 addRoutes 动态添加。

// @/store/modules/permission.js
import { asyncRoutes, constantRoutes } from '@/router'

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

提示: 动态路由可以在系统管理中的菜单管理进行新增和修改，前端加载时会请求接口获取菜单信息并转换成前端对应的路由。

三、常用路由操作方法

1. 跳转到不同页面

使用 router.push 方法跳转页面：

this.$router.push({ path: "/system/user" });

2. 跳转并传递请求参数

使用 query 属性传递参数：

this.$router.push({ path: "/system/user", query: { id: "1", name: "若依" } });

3. 高亮指定菜单

使用 activeMenu 设置高亮菜单：

{
  path: '/article/:id',
  component: ArticleDetail,
  meta: { activeMenu: '/article/list' }
}

四、外链路由示例

在某些情况下，可能需要添加外链到导航中，例如若依官网：

{
  path: 'http://ruoyi.vip',
  meta: { title: '若依官网', icon : "guide" }
}