路由控制

主要介绍如何在项目中使用和规划页面路由的文件。

项目路由配置存放于 src/router 下面。 src/router/modules 用于存放路由模块，在该目录下的新增的文件请在 src/router/index 中手动导入使路由生效。

配置

模块说明

在 src/router/modules 内的 .ts 文件会被视为一个路由模块。

一个路由模块包含以下结构:

import { RouteRecordRaw } from 'vue-router';
import Layout from '@/layouts/index';

export const fileRoutes: RouteRecordRaw[] = [
  {
    path: '/file',
    name: 'file-root',
    component: Layout,
    redirect: '/file/pdf-preview',
    meta: {
      title: '文件预览',
      icon: 'menu-file',
      authCodes: [],
      visible: true,
    },
    children: [
      {
        path: '/file/pdf-preview',
        name: 'pdf-preview',
        component: () => import(/* webpackChunkName: "pdfPreview" */ '@/views/file/pdf-preview/index.vue'),
        meta: {
          authCodes: [],
          title: 'PDF预览',
        },
      },
      {
        path: '/file/cad-preview',
        name: 'cad-preview',
        component: () => import(/* webpackChunkName: "cadPreview" */ '@/views/file/cad-preview/index.vue'),
        meta: {
          authCodes: [],
          title: 'CAD预览',
        },
      }
    ],
  }
];

注意事项

• 整个项目所有路由 name 不能重复
• path除了采用kebab-case命名规范外，必须以 / 开头，即使是 children 里的 path 也要以 / 开头。

RouteRecordRaw配置说明

@description: RouteRecordRaw 参数说明
@param: path {string} 跳转路径
@param: redirect {string} 重定向跳转路径，无需配置，代码会自动生成默认重定向用户有权限的第一个路由
@param: component {string} 组件
@param: meta {object} 可以自定义一些内容
        visible {boolean} 一级菜单只有一个二级菜单时是否始终显示。（因为有的一级菜单只有一个二级菜单）
        keepAlive {Boolean} 默认false， 开启页面缓存
        hidden {Boolean} 默认false， 为true表示此路由不作为菜单展示
        hideAside {Boolean} 默认false， 为true表示隐藏左侧导航
        icon {string} 菜单对应的图标icon, 推荐使用svg形式
        title {string} 菜单对应的标题，也作为浏览器标签标题展示
        authCodes {array} 用户权限code
        operations {array} 当前页面组件用户有权限的操作的 code 列表
        isBlank {boolean} 默认false， 是否需要在浏览器新标签页中打开
        activeMenu {string} 激活菜单的index, index取的是路由中path的值, 解决有不在菜单中展示的页面时菜单激活指定菜单

        setBreadcrumbs {function} 重置面包屑内容
        iframeSrc {string} 页面内嵌iframe的地址
        isPageReused {boolean} 默认false 如果两个路由使用同一个组件，一定要设置isPageReused: true

        keepAlive {boolean} 默认false，页面是否被缓，true为缓存页面
@return void {*}

配置图标

图标推荐使用svg形式，都放在 /src/assets/svg 下面。设置步骤如下：

1. 下载svg图标文件，移动到 /src/assets/svg 目录下
2. 在路由的 meta 中新增 icon 属性，设置上对应图标的svg文件名即可

路由刷新

开启路由刷新

开启路由刷新只需要配置路由的path以 /redirect/** 开头即可

{
  path: '/redirect/iframe/bilibili',
  name: 'iframe-bilibili',
  ...
}

路由刷新实现方式

项目中采用的是 重定向 方式实现，layouts/redirect/index.vue文件内容如下:

<template>
  <div></div>
</template>
<script lang="ts">
  import { onMounted, defineComponent } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  export default defineComponent({
    name: 'redirect',
    setup() {
      const router = useRouter();
      const replaceAll = (str: string, substr: string) => {
        if (!str) {
          return str;
        }
        return str.replace(new RegExp(substr, 'gm'), '');
      };
      onMounted(() => {
        const { fullPath } = useRoute();
        router.replace(`${replaceAll(fullPath, '/redirect')}`);
      });
    },
  });
</script>

外部链接

系统中是通过iframe配置使用外部链接的

使用外部链接

需要在路由的 meta 中新增 iframeSrc 属性，设置为内嵌iframe地址即可。

{
  path: '/iframe/bilibili',
  name: 'iframe-bilibili',
  component: () => import('@/layouts/iframe/index.vue'),
  meta: {
    authCodes: [],
    title: '哔哩哔哩(内嵌)',
    iframeSrc: 'https://www.bilibili.com/',
    isPageReused: true,
  },
}

根路由

系统已经帮你做了判断，当一个路由下面的 children 声明的路由大于 1 个时，自动会变成嵌套的模式。 如果子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中，若不想这样，可以通过设置在根路由meta中设置 visible: true 来取消这一特性。

页面缓存

开启页面缓存

开启缓存有 3 个条件

1. 在router中meta内将 keepAlive 设置为 true
2. 路由设置 name，且不能重复
3. 路由对应的组件加上 name，与路由设置的 name 保持一致

{
  ...,
  // name
  name: 'home',
  // 对应组件组件的name
  component: () => import('@/views/home/index.vue'),
  ...
},

// @/views/home/index.vue
export default defineComponent({
  // 需要和路由的name一致
  name:"home"
});

注意

keep-alive 生效的前提是：需要将路由的 name 属性及对应的页面的 name 设置成一样。因为：include - 字符串或正则表达式，只有名称匹配的组件会被缓存