f3-router
v1.0.7
Published
一个约定路由插件For VITE
Downloads
74
Maintainers
Readme
模板
https://gitee.com/codesmallwhite/f3-router-template.git
使用步骤
- npm add vue-router
- npm add f3-router -D
- vite 配置中使用
//+++++++++
import f3Router from 'f3-router'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
//+++++++++
f3Router()],
})
- 在 main.js 中使用
//frouter目录是插件生成的
//+++++++++
import filerouter from './frouter/router'
createApp(App)
//+++++++++
.use(filerouter())
.mount('#app')
- 添加一些额外的路由
.use(filerouter({
routesHook(routes) {
routes.unshift({
path: '/',
redirect: '/home'
}, {
path: '/shop',
redirect: '/shop/list'
})
}
}))
- main.[tj]s路由鉴权
const router = filerouter({
routesHook(routes) {
routes.unshift({
path: '/',
redirect: '/home'
})
}
})
router.beforeEach(async (to, from) => {
const whitePathList = ['/login']
if (
// 检查用户是否已登录
!userInfo.token &&
// ❗️ 避免无限重定向
!whitePathList.includes(to.path)
) {
// 将用户重定向到登录页面
return { path: '/login', replace: true, query: to.query }
}
})
const app = createApp(App)
.use(router)
.mount('#app')
- 在 app.vue 中加入
<script setup>
//+++++++++
import { RouterView } from 'vue-router';
</script>
<template>
<!-- ++++++++++ -->
<RouterView></RouterView>
</template>
- 在 views 文件夹新增页面
- npm run dev
meta 定义
在视图文件中 使用 defineMeta 定义 meta
defineMeta({
lazy: 'false' //默认true,
withLayout:'false' //默认ture(如果存在Layout文件)
beforeEnter: (to, from) => {
console.log(to, from)
}
})
注意 meta 中使用的变量只能从外部导入,不能直接使用当前文件定义的变量 导入变量必须是绝对路径/别名路径导入,相对路径可能无法识别 // 动态路由[可选参数]
路由注册约定
需要注意的是,满足以下条件才会被注册为路由,
不以 . 或 _ 开头的文件或目录
非components 和 component 目录
非utils 和 util 目录
是 .jsx、 .tsx 文件
动态可选路由 约定 [ $] 包裹的文件或文件夹为动态可选路由。
比如:
src/pages/users/[id$].tsx 会成为 /users/:id?
src/pages/users/[id$]/settings.tsx 会成为 /users/:id?/settings
动态路由 约定 [] 包裹的文件或文件夹为动态路由。
比如:
src/pages/users/[id].tsx 会成为 /users/:id
src/pages/users/[id]/settings.tsx 会成为 /users/:id/settings
嵌套路由
约定目录下有 layout.ext 时会生成嵌套路由,以 该文件 为该目录的 layout。 比如以下目录结构,
.
└── pages
└── users
├── layout.tsx
├── index.tsx
└── list.tsx
如果某文件不需要 layout,则在该文件插入下面的代码片段
defineMeta({
withLayout: false
})
TIPS:不要同时存在 file file/index 这种结构
如:
└── users.tsx
└── users
└── index.tsx
TODOLIST
- 自定义页面文件夹
- 自定义路由文件生成目录
- Meta 中的变量支持相对路径引入 √
- 美化输出文件