vite中自动生成路由

本文最后更新于 2024-11-26 17:46:05

根据目录自动生成路由

关键字import.meta.glob

常用的路由配置方式已经满足使用,但是为了追求更好的路由配置方式,减少繁琐的配置方式,可以将路由和文件夹关联起来

  1. 使用此方法可以让路由随着文件夹的创建而创建(根据微信小程序开发的思想,注意,每个文件夹下必须有一个.vue.js 文件,而且名字必须一致,生成的路由就是改名字的路由)
  2. 例如:在views下(因为以下的代码是由views目录下的文件产生的路由),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
- views
- index
- index.vue
- index.js
- second
- second.vue
- second.js
// 以上产生的路由有 '/index' '/second' 这两个路由
// 当然也可以产生子路由
- views
- index
- index.vue
- index.js
- son
- son.vue
- son.js
- second
- second.vue
- second.js
// 以上产生的路由有 '/index' '/index/son' '/second' 这三个路由

// 如果有更多的子路由,可以无限的嵌套文件夹


// 当然我们希望有时候,在切换路由的时候,该路由可以携带一些参数,.js文件就是用来写携带的参数,可以使用一下模版

export default {
meta: {
title: '通知'
}
}
// 一般情况下,title 参数用于给不同的路由设置不同的标题,其他的参数可根据自己需求而定,
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const pages = import.meta.glob('../views/**/*.js', {
eager: true,
import:'default'
});

const components = import.meta.glob('../views/**/*.vue');
// 上一行的配置是由于在生产环境中文件夹的路径变化,要映射

const routes = Object.entries(pages).map(([path, mate]) => {
const pathRealy = path.replace('../views', '').replace(/\/[^/]*\.js$/, '') || '/';
const nameRealy = path.split('/').pop().replace('.js', '');
const componentRealy = components[path.replace('.js', '.vue')];

return {
path: pathRealy,
name: nameRealy,
component: componentRealy,
meta: mate.meta
}
});
// console.log(routes);

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: routes
})
// 一下是用来从跟路由跳转第一个路由(因为没有设置跟路由),同时修改页面的标题(也就是 .js 文件中,title 变量)
router.beforeEach((to, from, next) => {

if (to.path == '/') { // 因为没有 / 路由的存在
next('/first');
return;
}
nextTick(() => {
if (to.meta.title) {
document.title = to.meta.title;
} else {
document.title = '默认标题';
}
});
next();
});
JS

看了上面这多代码,的确比较难懂,其实在自己调试的手可以打印出来,看看每一步处理的什么东西


vite中自动生成路由
https://one-and-one-fourth.github.io/2024/11/26/vue/vite中自动生成路由/
作者
一又四分之一
发布于
2024-11-26 17:14:01
更新于
2024-11-26 17:46:05
许可协议