1.0.7 • Published 10 months ago

f3-router v1.0.7

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

模板

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.tjs路由鉴权
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 中的变量支持相对路径引入 √
  • 美化输出文件

联系

qingchunp@foxmail.com

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

0.0.25

1 year ago

0.0.23

1 year ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago