sagaroute-vscode
❗注意: 在 介绍
文件变化后触发路由列表更新
支持智能提示路由路径
特点
使用1. 安装插件从 2. 在项目中下载
|
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
dirpath | 页面文件目录路径 | string | 'src/pages' |
layoutDirPath | 全局路由目录路径 | string | 'src/layouts' |
routeFilePath | 指定路由模板文件的路径 | string | 'src/route.tsx' |
lazy | 路由是否懒加载 | boolean/Function(string): boolean | false |
hooks | 执行周期的钩子函数 | object | -- |
pathRewrite | 用于对 import 语句的路径进行替换 | Object{string: string} | -- |
rootPath | 项目路径 | string | process.cwd() |
onWarning | 触发警告时的回调函数 | function(message: string): void | -- |
注意❗:在该插件中,hooks
的print.inject.after
、print.write.before
、print.write.after
不会被执行。
对上述配置参数中更详细的说明可看API
配置设置方式
往项目中添加sagaroute.config.js
或sagaroute.config.cjs
作为配置文件,在文件中以CommonJS
的格式编写和导出部分上述配置项,例如:
/** @type {import('@sagaroute/react').RoutingOption} */
module.exports = {
// 指定页面文件目录
dirpath: 'src/views',
// 指定路由模板文件
routeFilePath: 'src/router/index.jsx',
};
命令
sagaroute-vscode
提供了以下命令,可通过(CMD/CTRL + Shift + P)唤出命令面板后输入使用:
Sagaroute: routing
: 生成路由列表,若存在缓存,则无视缓存重新构建Sagaroute: rebuild
: 重新根据配置文件构建配置,并执行生成路由列表的操作Sagaroute: show
: 打开Sagaroute
的output
输出面板
.vscode/settings.json
中的Sagaroute
设定
你可以在.vscode/settings.json
中设置sagaroute.working
变量,以决定Sagaroute
是否开启监听路由文件目录的变化以动态生成约定式路由列表,如下所示:
{
// true代表开启监控
"sagaroute.working": true
}
状态栏
在vscode
底部的状态栏中会有Sagaroute
的状态控件,以显示Sagaroute
是否处于监听路由文件目录中。如下所示:
你也可以通过点击该状态控件来切换监听状态。监听状态会同步到.vscode/settings.json
的sagaroute.working
变量中
高级特性
路由路径智能拼写
你可以在项目中通过键入"//"
,sagaroute
插件会提供所有所有路由的路径提示,如下所示:
选择后,"//"
会被替换成所选择的路由路径
注意:在vscode
项目首次打开时,要先做保存操作或者强制Sagaroute: routing
后,才会有开启路由路径智能拼写
支持批量生成lazy
路由
lazy
是react-router@6.4
新增的路由属性,用于路由文件的懒加载,lazy
有多种写法,如下所示:
[
// 写法1: 只对路由文件进行懒加载
{
path: 'projects',
loader: ({ request }) => fetchDataForUrl(request.url),
lazy: () => import('./projects'),
},
// 写法2: 对路由文件及其路由属性变量进行懒加载
{
path: 'messages',
async lazy() {
let { messagesLoader, Messages } = await import('./pages/Dashboard');
return {
loader: messagesLoader,
Component: Messages,
};
},
},
];
本插件可以通过设置lazy
配置项统一生成上述 👆 第 2 种写法的lazy
路由,如下 👇 效果图:
缓存
本插件内部实现了路由对象的缓存机制,因此存在以下优点:
- 加速二次生成路由的速度:对内容未更改的文件会直接取缓存作为生成结果,加快生成整个路由列表的生成速度
- 只在路由列表变化时更新文件:对每个非缓存的新路由,会与缓存中的路由进行对比,如果所有对比结果与上次相同且没有增删的路由,则不会更改文件内容,避免频繁的热更新
可看以下👇效果图:
若要无视缓存强制生成路由列表,则可使用Sagaroute: routing
命令