Teek Design Vue3

主题

Teeker2025-07-24
1047
4m
Get...

路由功能 ​

路由缓存 ​

路由缓存是通过 vue-router 的 keep-alive 组件实现的。keep-alive 组件会缓存组件的状态，当组件再次被访问时，会直接从缓存中取出组件，而不是重新创建一个新的组件。

keep-alive 组件使用的是组件的 name 属性来作为缓存的 key，因此在配置路由的时候按照规则添加 name 属性

默认情况下路由缓存功能是关闭的，需要在路由数据中设置 meta 属性的 isKeepAlive 字段即可。

如何使用？ ​

通过设置路由数据的 meta 属性中的 isKeepAlive 字段，可以控制路由是否缓存。

ts
{
  name: 'about',
  path: '/about',
  component: 'layout.base$view.about',
  meta: {
    title: 'about',
    isKeepAlive: true
  }
}

IFrame 路由 ​

Teek 支持内嵌其他系统，这是因为 Teek 经历过几次 Portal 门户的使用场景，所以 Teek 封装了 IFrame 组件，支持 IFrame 通信、IFrame 缓存等功能。

IFrame 的代码在 src/layout/components/iframe 下。

如何使用？ ​

只需要在写路由的时候在 meta 传入 frameSrc 即可：

json
{
  "path": "teek-design-vue2-iframe",
  "name": "TeekDesignVue2IFrame",
  "meta": {
    "title": "Teek Design Vue2",
    "frameSrc": "http://vue2-design.teek.top/"
  }
}

此时点击菜单，可以打开这个嵌入的 frameSrc 网页。

IFrame 加载 ​

IFrame 在加载的时候，可以使用 Loading 开启动画，该配置默认为 true，所以无需设置，如果要关闭，则：

json
{
  "path": "teek-design-vue2-iframe",
  "name": "TeekDesignVue2IFrame",
  "meta": {
    "title": "Teek Design Vue2",
    "frameSrc": "http://vue2-design.teek.top/",
    "frameLoading": false
  }
}

IFrame 缓存 ​

IFrame 可以开启缓存，这样打开过的 IFrame 页面就能和正常路由一样进行缓存，下次访问时不需要重新渲染页面。

通过 frameKeepAlive 来开启缓存，默认关闭：

json
{
  "path": "teek-design-vue2-iframe",
  "name": "TeekDesignVue2IFrame",
  "meta": {
    "title": "Teek Design Vue2",
    "frameSrc": "http://vue2-design.teek.top/",
    "frameKeepAlive": true
  }
}

警告

IFrame 缓存目前是记录已打开的页面，当打开多个页面时，只有激活的页面显示，其他页面隐藏：display: none，即缓存 IFrame 页面的 DOM，这样打开非常多的 IFrame 会占用一些内存。

IFrame 新标签打开 ​

有时候希望 IFrame 可以以新窗口打开方式打开，则使用 frameOpen 属性，默认不以新窗口打开方式打开:

json
{
  "path": "teek-design-vue2-iframe",
  "name": "TeekDesignVue2IFrame",
  "meta": {
    "title": "Teek Design Vue2",
    "frameSrc": "http://vue2-design.teek.top/",
    "frameOpen": true
  }
}

使用场景一般是后端返回的路由中部分 IFrame 是内嵌，部分是新窗口打开方式打开。

外链路由 ​

除了 IFrame 嵌入可以打开外部链接，正常的路由也可以打开外部链接。

只需要在路由的配置中，给 path 填写带有 http 或者 https 的链接，就可以跳转。

json
{
	path: "https://github.com/Kele-Bingtang/teek-design-vue3",
	name: "TeekDesignVue3Github",
	meta: {
		title: "Github",
	},
},

路由内置属性 ​

路由内置属性仅限角色（动态）路由拥有。

在角色（动态）路由初始化时，Teek 会在 meta 里生成部分属性来辅助框架的构建。

meta._fullPath ​

一个路由的完整路径，在编译阶段自动生成。

如果子级路由的 path 不是 / 开头，则添加上父级路由的 path，如三级路由的 meta._fullPath 将是有一级路由 + 二级路由 + 三级路由的 path 组成（都不是带 / 开头）。

meta._dynamic ​

是否为动态路由，在编译阶段自动生成，用来和静态路由进行区分。

redirect ​

该属性可以在路由进行配置，如果没有配置，则 Teek 会自动根据是否存在子路由来生成，如果存在子路由，则自动 redirect 到第一个子路由，以 name 作为 redirect 的目标。

component ​

上文的 异步懒加载 中，当 component 配置了 Component 字符串方式或 Path 方式会自动加上 /src/views 前缀和 .vue 后缀。

name ​

路由的 name，如果一个路由没有设置 name 且存在子路由，则该路由的 name 为第一个子路由的 name + Parent。

路由重置 ​

常用场景：用户切换角色或退出登录时需调用重置路由功能，将路由和菜单恢复到初始化状态。

ts
import { resetRouter } from "@/router";

// 清除动态路由
resetRouter();

// 清除静态路由 + 动态路由
resetRouter(true);