路由

本项目使用vite插件vite-plugin-pages配合vue-router处理页面路由，自动对views文件夹下的文件进行转换。

文件夹说明

假如我们的文件夹组织结构如下:

src/views/
  ├── users/
  │  ├── components
  │  │  └── form.vue
  │  ├── [id].vue
  │  └── index.vue
  └── home.vue


// 将会生成如下路由
[
    {
        "path": "/users",
        "component": "/src/views/users.vue",
        "children": [
            {
                "path": "",
                "component": "/src/views/users/index.vue",
                "name": "users"
            },
            {
                "path": ":id",
                "component": "/src/views/users/[id].vue",
                "name": "users-id"
            }
        ]
    }，
    {
        "path": "/home",
        "component": "/src/views/home.vue",
    }
]

Meta配置说明

export type Meta = {
    // 是否需要权限登录，如果需要，则显示菜单，否则的话直接跳转
    requiresAuth?: boolean
    // 当前路由不再标签页显示
    hideTab?: boolean
    // 是否固定标签
    affix?: boolean
    // 标题
    title?: string
    // 当前激活的菜单
    currentActiveMenu?: string
    // 路由动画
    transitionName?: RouterTransition
    // 页面是否使用流式布局
    contentMode?: 'full' | 'fixed'
}

meta信息在项目中如何配置?

vue

<template>
    // ...
</template>

<script lang="ts" setup>
    // ...
</script>

// **推荐使用yaml写法**
<route lang="yaml">
meta: 
    requiresAuth: false
</route>

// 或者用json的写法
<route lang="json">
{
    meta: {
        requiresAuth: false
    }
}
</route>

路由跳转

import { useGo } from '@dt-frames/core'

const go = useGo()

// 直接刷新(此时路由缓存还在)
go()
// 跳转至其它页面
go('/risk/declareSum')

重定向刷新

为了清除路由复用的缓存，需要采用重定向刷新。

import { useRedo } from '@dt-frames/core'

const redo = useRedo()

// 执行刷新
redo()

开启页面缓存

// 假如当前路由为'/base/calendar', 那么name将设置成如下,才能成功开启缓存：
<script lang="ts" setup name="base-calendar">
// ...
</script>

提示

name属性不能随便设置，必须按照上面案例这种规则才可以成功开启缓存！

404页面替换

在views下新建[...NotFound].vue文件，即可覆盖默认404页面。

views
 |-----[...NotFound].vue

路由 ​

文件夹说明 ​

Meta配置说明 ​

路由跳转 ​

重定向刷新 ​

开启页面缓存 ​

404页面替换 ​