admin-router-plus
TypeScript icon, indicating that this package has built-in type declarations

1.9.1 • Public • Published

admin-router-plus

介绍

vue-router 登录拦截(前置)、动态注册路由。

安装

  npm i admin-router-plus --save

说明

备注:

  1. 插件依赖vue-router(路由),需在注册vue-router之后注册。
  2. 登录拦截(前置):判断cookie中的token是否不为空,否则将被拦截至登录页。
  3. 动态路由子路由路径path不能以/开头,否则将会被注册为顶级路由。
  4. 无需登录鉴权路由需配置meta: { noAuth: true }, 否则将被拦截跳转到登录页。
export declare interface RouterConfig {
  loginPath?: string // 登录页路径,默认/login
  enableDynamic?: boolean, // 是否开启动态路由
  modules?: Record<string, any>; // 导入所有动态页面文件
  routesRequest?: () => Promise<DynamicRoute[]>; // 动态路由请求(跳转到首个鉴权路由触发)
}

export declare interface DynamicRoute {
  parent?: string; // 挂载父级(父级name属性值,顶级路由置空/0)
  path: string; // 路由地址
  name: string; // 路由名称
  redirect?: string; // 路由重定向
  component: string; // 页面文件名
  meta?: Record<string, unknown> // 路由元信息
  isDynamic?: boolean; // 动态路由标识(自动添加)
  children?: DynamicRoute[]; // 子路由
}

使用

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import RouterPlus from 'admin-router-plus'

import router from './router'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(RouterPlus, {
  enableDynamic: true, // [可选]开启动态路由
  modules: import.meta.glob(`./views/**`), // [可选]引入所有页面文件
  routesRequest: async () => {
    const res = await getJSON('/menu/routes')
    return res.data
  }, // 动态路由请求接口
})

app.mount('#app')

实例

动态路由接口响应 json 数据

[
  {
    "parent": "",
    "path": "/",
    "name": "layout",
    "redirect": "/company",
    "component": "LayoutView",
    "children": [
      {
        "parent": "layout",
        "path": "company",
        "name": "company",
        "redirect": "/company/user",
        "component": "Empty",
        "meta": { "title": "公司管理" },
        "children": [
          {
            "parent": "company",
            "path": "user",
            "name": "user",
            "component": "UserView",
            "meta": { "title": "员工管理" }
          },
          {
            "parent": "company",
            "path": "department",
            "name": "department",
            "component": "DepartmentView",
            "meta": { "title": "部门管理" }
          }
        ]
      }
    ]
  }
]

等同于 router.ts 如下:

import { createRouter, createWebHistory } from 'vue-router'

const Empty = () => import('../views/Empty.vue')
const NotFound = () => import('../views/NotFound.vue')
const LayoutView = () => import('../views/LayoutView.vue')

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 静态路由
    {
      path: '/login',
      name: 'login',
      meta: { noAuth: true, noCache: true },
      component: () => import('../views/LoginView.vue'),
    },
    // 等同动态路由添加内容
    {
      path: '/',
      name: 'layout',
      redirect: '/company',
      component: LayoutView,
      children: [
        {
          path: 'company',
          name: 'company',
          redirect: '/company/user',
          meta: { title: '公司管理' },
          component: Empty,
          children: [
            {
              path: 'user',
              name: 'user',
              meta: { title: '用户管理' },
              component: () => import('../views/UserView.vue'),
            },
            {
              path: 'department',
              name: 'department',
              meta: { title: '部门管理' },
              component: () => import('../views/DepartmentView.vue'),
            },
          ],
        },
      ],
    },
    // 包含动态路由时需最后添加
    {
      path: '/:pathMatch(.*)',
      name: '404',
      component: NotFound,
    },
  ],
})

export default router

Package Sidebar

Install

npm i admin-router-plus

Weekly Downloads

8

Version

1.9.1

License

ISC

Unpacked Size

7.65 kB

Total Files

8

Last publish

Collaborators

  • evan.lin