前言:
在写vue3+vite组合的项目中,很多时候我们都需要配置本地路由,实际vite有个神器来提高效率,把配置本地路由的工作代替我们处理掉。
具体使用:
1、安装 npm/cnpm/pnpm/yarn 都可以,装上下面两个插件
vite-plugin-pages vite-plugin-vue-layouts
2、vite.config.js中配置
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';
const PROJECT_ROOT = '../..'; //根据个人项目实际需要
const config = {
plugins: [
Pages({
// 需要生成路由的文件目录,默认就是识别src下面的pages文件
pagesDir: join(PACKAGE_ROOT, 'src') + '/pages',
//dirs: "src/pages",
// 排除在外的目录,即不将所有 components 目录下的 .vue 文件生成路由
exclude: ["**/components/*.vue"],
}),
Layouts({
layoutsDirs: join(PACKAGE_ROOT, 'src') + '/layouts',
}),
]
}
3、路由配置
import { createRouter, createWebHashHistory } from 'vue-router';
import { setupLayouts } from 'virtual:generated-layouts';//将route里面的路由变成嵌套路由
import generatedRoutes from 'virtual:generated-pages';
const routes = setupLayouts(generatedRoutes);
const router = createRouter({
history: createWebHashHistory(),
routes,
});
const app = createApp(App);
app.use(router);
virtual:generated-layouts 这个插件只做一件事,就是把通过 vite-plugin-pages 生成的一级路由处理成嵌套路由,大概就是这样:
项目中有的路由是需要用到布局页面的,有的则不需要,
1、那我们可以将不需要的页面设置为 layout: false :
<route>
{
meta: {
layout: false
}
}
</route>
2、在路由配置中间增加
...
import generatedRoutes from 'virtual:generated-pages';
//加这里的代码
let routes = []
generatedRoutes.forEach(v => {
routes.push(v?.meta?.layout != false ? setupLayouts([v])[0] : v)
})
//注释这行代码
const routes = setupLayouts(generatedRoutes);
...
4、后台管理系统的 侧边栏,上边栏 加 右边主要内容 路由配置
1)新建layouts
2)DesktopLayout.vue
<template>
<div class="flex-box">
<SidebarMenu />
<div class="right-box">
<div class="right-box-header">
<TopbarMenu />
</div>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>
</div>
</div>
</template>v
3)单个页面的路由配置
1、增加路由配置
<route lang="yaml">
meta:
layout: DesktopLayout
</route>
2、添加页面内容
<template>
<router-view v-slot="{ Component }">
<keep-alive>
...页面主体内容
</keep-alive>
</router-view>
</template>
5、路由具体使用
- src/pages/users.vue -> /users
- src/pages/users/profile.vue -> /users/profile
- src/pages/settings.vue -> /settings
以 index 命名的文件会自动当做路由的索引页:
- src/pages/index.vue -> /
- src/pages/users/index.vue -> /users
动态路由
使用方括号来表示动态路由,文件夹和文件都可以动态哦:
- src/pages/users/[id].vue -> /users/:id (/users/one)
- src/[user]/settings.vue -> /:user/settings (/one/settings)
动态参数需要通过 props 传入到目标页面,如 src/pages/users/[id].vue 路由 /users/abc 将需要传递如下参数:{ "id": "abc" }
这种的就是动态路由的页面