Skip to content
On this page

路由

Vben3采用Vuejs官方推荐路由vue-router,功能路径位于packages/router下。

依赖安装

bash
pnpm add vue-router@4

路由模块

router-view

所有的路由都由router-view标签进行映射,在SPA中,你可以将其放在任何地方以适应你的布局。

编写方式

路由功能使用不同的写法以适用不同规格的项目的需求👉 简单示例

以下为Vben3路由组织方式👇

js
📁router
└── 📁src
      └── 📁helper // 路由功能
      └── 📁menus  // 菜单功能 
      └── 📁mitt   // 路由更改监听 
      └── 📁page   // 公共路由相关
      └── 📁routes // 功能路由相关
            └── 📁modules // 功能路由存放
            └── index.ts
      └── index.ts // 入口文件
      └── guard.ts // 路由导航守卫

提示

所有功能路由文件都放在modules目录下以ts文件后缀进行解析。

ts
import { createRouter, createWebHashHistory, Router } from 'vue-router'

// 初始化路由
export let router: Router;
export function InitRouter(path: string): Router {
  router = createRouter({
    history: createWebHashHistory(path),
    routes: BaseRoutes,
    strict: true,
    scrollBehavior: () => ({left: 0, top: 0})
  })
  return router
}
ts
// routes/modules/dashboard.ts
import { LAYOUT } from '../basic'

const dashboard: RouteRecordItem = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    orderNo: 1,
    icon: 'ion:grid-outline',
    title: 'routes.dashboard.dashboard',
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('@/pages/dashboard/analysis/index.vue'),
      meta: {
        title: 'routes.dashboard.analysis',
        icon: 'ion:grid-outline',
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('@/pages/dashboard/workbench/index.vue'),
      meta: {
        title: 'routes.dashboard.workbench',
        icon: 'ion:grid-outline',
      },
    },
  ],
}

export default dashboard

相关功能

路由导航

路由导航分为编程式导航声明式导航,通常使用✔️编程式导航进行路由跳转。

声明式编程式
<router-link :to="...">$router.push(...)
ts
// 字符串路径
this.$router.push('/home');

// 带有路径的对象
this.$router.push({ path: '/home' })

// 命名的路由,并加上参数,让路由建立url
this.$router.push({ name: 'user', params: { username: 'foo' }});

// 带查询参数,结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' }})

// 带hash,结果是 /about#team
this.$router.push({ path: '/about', hash: '#team' })

WARNING

注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path。

路由白名单功能

通过设置路由白名单,无需通过路由导航守卫拦截即可访问页面。

路由导航守卫功能

在导航到新路由之前,导航守卫会拦截那些正在进入的路由。从而实现导航前和导航后的一些行为实现。

路由权限功能

通过给路由添加权限标识符,在跳转之前进行拦截检测路由的权限,来控制用户是否有权限访问该路由。

路由异常处理功能

对一些异常路由进行异常处理,如404,500等。

动态路由Tab自动关闭功能

ts
  {
    path: 'detail/:id',
    name: 'TabDetail',
    component: () => import('/@/views/demo/feat/tabs/TabDetail.vue'),
    meta: {
      currentActiveMenu: '/feat/tabs',
      title: t('routes.demo.feat.tabDetail'),
      hideMenu: true,
      //dynamicLevel 最大能打开的Tab标签页数
      dynamicLevel: 3,
      //realPath 动态路由实际路径(考虑到动态路由有时候可能存在N层的情况
      //例:/:id/:subId/:...), 为了减少计算开销, 
      //使用配置方式事先规定好路由的实际路径(注意: 该参数若不设置,将无法使用该功能)
      realPath: '/feat/tabs/detail',
    },
  }

API说明

路由元信息

有时,我们想要将一些任意信息附加到路由上,如过渡,权限,状态等。这些信息可以通过接收属性对象的meta属性来实现,并且它可以在路由地址和导航守卫上都被访问到。以下是meta属性可配置的字段👇

ts

export interface RouteMeta {
  // 路由title  一般必填
  title: string;
  // 动态路由可打开Tab页数
  dynamicLevel?: number;
  // 动态路由的实际Path, 即去除路由的动态部分;
  realPath?: string;
  // 是否忽略权限,只在权限模式为Role的时候有效
  ignoreAuth?: boolean;
  // 可以访问的角色,只在权限模式为Role的时候有效
  roles?: RoleEnum[];
  // 是否忽略KeepAlive缓存
  ignoreKeepAlive?: boolean;
  // 是否固定标签
  affix?: boolean;
  // 图标,也是菜单图标
  icon?: string;
  // 内嵌iframe的地址
  frameSrc?: string;
  // 指定该路由切换的动画名
  transitionName?: string;
  // 隐藏该路由在面包屑上面的显示
  hideBreadcrumb?: boolean;
  // 如果该路由会携带参数,且需要在tab页上面显示。则需要设置为true
  carryParam?: boolean;
  // 隐藏所有子菜单
  hideChildrenInMenu?: boolean;
  // 当前激活的菜单。用于配置详情页时左侧激活的菜单路径
  currentActiveMenu?: string;
  // 当前路由不再标签页显示
  hideTab?: boolean;
  // 当前路由不再菜单显示
  hideMenu?: boolean;
  // 菜单排序,只对第一级有效
  orderNo?: number;
  // 忽略路由。用于在ROUTE_MAPPING以及BACK权限模式下,生成对应的菜单而忽略路由。2.5.3以上版本有效
  ignoreRoute?: boolean;
  // 是否在子级菜单的完整path中忽略本级path。2.5.3以上版本有效
  hidePathForChildren?: boolean;
}