cf0bbed3aa
Former-commit-id: fc65cf0bd59f74c49907a522afa9e361e146541d [formerly fc65cf0bd59f74c49907a522afa9e361e146541d [formerly fc65cf0bd59f74c49907a522afa9e361e146541d [formerly fc65cf0bd59f74c49907a522afa9e361e146541d [formerly b498093f53a934dc50b75119539c83487e113f54 [formerly 1939f3aa2584edd9b039e99f12f2c7da2982ae16]]]]] Former-commit-id: 15bb624d48dd47ee69b0b14bd8f0030568f66e35 Former-commit-id: 59df8c756c782130b28a9f50c33745b213598432 Former-commit-id: ebdf0a259d07c99ef06a320063abc890b1e47c24 [formerly dc5b000425cf19943862055f6bcc1e5f5b50baea] Former-commit-id: 1fe49134e36d5c4867af6fab32bb91853895665f Former-commit-id: e23ed3d4dd3c917c0c932a2c826b721fed4b8225 Former-commit-id: 2f99de3613031f448756f57458220348b16f4c86 Former-commit-id: a58fe5e45946e35c32985808d7e729cfe638f050 Former-commit-id: ddf471f9aeb24ce8d38a0c8af5716c9f6beabdca
76 lines
1.6 KiB
Markdown
76 lines
1.6 KiB
Markdown
---
|
||
sidebar: auto
|
||
---
|
||
|
||
# 路由
|
||
|
||
## 数据
|
||
|
||
完整版的 D2Admin 路由设置文件在 `d2-admin/src/router/routes.js`。
|
||
|
||
需要注意的是大多数路由设置要写在 frameIn 下。frameIn 中的页面会在嵌套在一个包含顶栏和侧边栏的页面布局中显示。
|
||
|
||
## 路由配置
|
||
|
||
路由注册和钩子设置文件为 `d2-admin/src/router/index.js`，此文件中将 `routes.js` 中导出的 routes 变量注册到路由，并且设置后续的路由拦截和登陆状态判断，多页面的新建页面事件触发也来自这里。该文件再导出注册了所有页面的路由实例，在 `main.js` 中注册到 vue 根实例。
|
||
|
||
## 路由缓存
|
||
|
||
路由缓存默认为开启状态，页面组件会被 keepAlive，如果想禁用某个页面的缓存，请在该路由配置的 meta 中加入：
|
||
|
||
``` js
|
||
meta: {
|
||
notCache: true
|
||
}
|
||
```
|
||
|
||
最后结果类似这样：
|
||
|
||
``` js {7}
|
||
{
|
||
path: '/page-cache/off',
|
||
name: 'page-cache-off',
|
||
component: () => import('xxx.vue'),
|
||
meta: {
|
||
requiresAuth: true,
|
||
notCache: true,
|
||
title: '关闭缓存'
|
||
}
|
||
}
|
||
```
|
||
|
||
虽然所有的路由默认都是开启缓存的，但是还需要遵守一个约定才可以正确缓存页面：
|
||
|
||
**页面组件必须有 name 字段，并且 name 字段的值和该路由的 name 字段一致。**
|
||
|
||
例如：
|
||
|
||
页面文件：
|
||
|
||
``` vue {9}
|
||
<template>
|
||
<d2-container>
|
||
Hello World
|
||
</d2-container>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'page-cache-on'
|
||
}
|
||
</script>
|
||
```
|
||
|
||
路由设置：
|
||
|
||
``` js {3}
|
||
{
|
||
path: '/page-cache/on',
|
||
name: 'page-cache-on',
|
||
component: () => import('xxx.vue'),
|
||
meta: {
|
||
requiresAuth: true,
|
||
title: '开启缓存'
|
||
}
|
||
}
|
||
``` |