docs(zh): add file-based routing related configuration documentation#2643
Merged
posva merged 4 commits intovuejs:mainfrom Mar 5, 2026
Merged
docs(zh): add file-based routing related configuration documentation#2643posva merged 4 commits intovuejs:mainfrom
posva merged 4 commits intovuejs:mainfrom
Conversation
✅ Deploy Preview for vue-router ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new Chinese sidebar section "基于文件的路由" and six new zh documentation pages covering file-based routing usage, file conventions, configuration, route extension, HMR, and ESLint. No code or public API signatures were changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/docs/zh/file-based-routing/extending-routes.md`:
- Line 57: Update the internal anchor links so they match VitePress's Chinese
auto-generated anchors: replace the link target
"./file-based-routing#routes-folder-structure" with
"./file-based-routing#路由文件夹结构" (referencing the "路由文件夹结构" heading) and replace
the link to "hmr.md#runtime-routes" (or similar English anchor) with
"hmr.md#运行时路由" (referencing the "运行时路由" heading); edit the markdown links in the
extending-routes.md content where those anchors are used so they point to the
exact Chinese heading anchors.
In `@packages/docs/zh/file-based-routing/file-based-routing.md`:
- Line 75: Update the sentence that currently reads "注意文件夹和文件的名称 `users/`
可以是任何有效的命名，如 `my-[id]-param/`。" to improve readability by replacing “有效的命名” with
either “有效命名” or “合法名称” (choose one consistent term), keeping the examples
`users/` and `my-[id]-param/` intact; locate the text containing those examples
to make this small wording change.
- Around line 150-156: 示例对象中用于命名视图的字段写错了：把当前的 "component" 改为
"components"（即在该路由对象里将 `component: { aux: () =>
import('src/pages/index@aux.vue') }` 更正为使用 `components`），以符合 Vue Router
的命名视图用法并避免误导读者；保留内部 `aux` 命名视图函数和 import 路径不变。
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/docs/.vitepress/config/zh.tspackages/docs/zh/file-based-routing/configuration.mdpackages/docs/zh/file-based-routing/eslint.mdpackages/docs/zh/file-based-routing/extending-routes.mdpackages/docs/zh/file-based-routing/file-based-routing.mdpackages/docs/zh/file-based-routing/hmr.mdpackages/docs/zh/file-based-routing/index.md
Comment on lines
+150
to
+156
| ```js | ||
| { | ||
| path: '/', | ||
| component: { | ||
| aux: () => import('src/pages/index@aux.vue') | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for Vue Router named views documentation and examples
web_search
Vue Router named views route record components propertyRepository: vuejs/router
Length of output: 148
🏁 Script executed:
# Also check if we can find the Vue Router source to verify the API
cd /tmp && git clone --depth 1 https://github.com/vuejs/router.git 2>/dev/null
find /tmp/router -type f -name "*.md" | xargs grep -l "named.*view\|components:" | head -5Repository: vuejs/router
Length of output: 349
🏁 Script executed:
# Search for examples of named views in Vue Router docs
find /tmp/router -type f -name "*.md" -o -name "*.ts" | xargs grep -A 5 "components\s*:" | head -40Repository: vuejs/router
Length of output: 38
🏁 Script executed:
# Read the named views documentation
cat /tmp/router/packages/docs/guide/advanced/named-views.md | head -150Repository: vuejs/router
Length of output: 143
🏁 Script executed:
# Search for route record definitions and examples in source
find /tmp/router/packages/router/src -type f -name "*.ts" | xargs grep -A 5 "components\s*:" | head -80Repository: vuejs/router
Length of output: 6242
🏁 Script executed:
# Look at the types definition for route records
find /tmp/router/packages/router/src -type f -name "*types*" | head -5
cat /tmp/router/packages/router/src/types/index.ts | grep -A 20 "RouteRecordRaw\|components"Repository: vuejs/router
Length of output: 5293
命名视图片段字段名写错：应为 components 而不是 component。
Line 151-155 当前写法会误导读者，命名视图在 Vue Router 中使用 components。
🩹 Proposed fix
{
path: '/',
- component: {
+ components: {
aux: () => import('src/pages/index@aux.vue')
}
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/docs/zh/file-based-routing/file-based-routing.md` around lines 150 -
156, 示例对象中用于命名视图的字段写错了：把当前的 "component" 改为 "components"（即在该路由对象里将 `component: {
aux: () => import('src/pages/index@aux.vue') }` 更正为使用 `components`），以符合 Vue
Router 的命名视图用法并避免误导读者；保留内部 `aux` 命名视图函数和 import 路径不变。
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/docs/zh/file-based-routing/extending-routes.md`:
- Around line 7-22: The example uses __dirname in beforeWriteFiles which is
undefined in ESM; fix by importing fileURLToPath from 'node:url' and defining
__dirname using fileURLToPath(new URL('.', import.meta.url)) before using
path.join in beforeWriteFiles (keep symbols: import of VueRouter, path,
fileURLToPath, const __dirname = fileURLToPath(...), and the
beforeWriteFiles/root.insert call).
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/docs/zh/file-based-routing/extending-routes.mdpackages/docs/zh/file-based-routing/file-based-routing.md
✅ Files skipped from review due to trivial changes (1)
- packages/docs/zh/file-based-routing/file-based-routing.md
Comment on lines
+7
to
+22
| ```ts | ||
| import VueRouter from 'vue-router/vite' | ||
| import path from 'node:path' | ||
|
|
||
| VueRouter({ | ||
| extendRoute(route) { | ||
| if (route.name === '/[name]') { | ||
| route.addAlias('/hello-vite-:name') | ||
| } | ||
| }, | ||
|
|
||
| beforeWriteFiles(root) { | ||
| root.insert('/from-root', path.join(__dirname, './src/pages/index.vue')) | ||
| }, | ||
| }) | ||
| ``` |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check if the documentation file exists and read the relevant lines
fd -t f "extending-routes.md" packages/docs/Repository: vuejs/router
Length of output: 164
🏁 Script executed:
# Check the router package.json exports to verify if 'vue-router/vite' is a valid export
cat packages/router/package.json | jq '.exports'Repository: vuejs/router
Length of output: 2120
🏁 Script executed:
# Search for usage patterns of vue-router/vite in the codebase
rg "vue-router/vite" -t ts -t js -t vueRepository: vuejs/router
Length of output: 83
🏁 Script executed:
# Also check for vite-plugin-pages imports to understand the pattern
rg "vite-plugin-pages|vite-plugin-vue-layouts" -t ts -t js -t md -A 2 -B 2 | head -50Repository: vuejs/router
Length of output: 2337
🏁 Script executed:
# Read the actual file content at the specified lines
sed -n '1,30p' packages/docs/zh/file-based-routing/extending-routes.mdRepository: vuejs/router
Length of output: 598
🏁 Script executed:
# Check how __dirname is handled in existing Vite plugin examples
rg "__dirname" -t ts -t js packages/ -A 2 -B 2 | head -60Repository: vuejs/router
Length of output: 2745
🏁 Script executed:
# Look for Vite config examples in the documentation
fd -t f "vite.config" packages/docs/
rg "vite.config|vite.config.ts" packages/docs/ -t ts -t md -A 5 | head -40Repository: vuejs/router
Length of output: 2650
第 19 行的 __dirname 在 ESM 环境中未定义，代码示例需要修复。
导入路径 import VueRouter from 'vue-router/vite' 是有效的。但在 Vite 配置文件的 ESM 上下文中，__dirname 不会自动可用，使用它会导致 ReferenceError。
在 ESM 中，需要先定义 __dirname：
import { fileURLToPath } from 'node:url'
const __dirname = fileURLToPath(new URL('.', import.meta.url))修正后的完整示例：
修正的代码示例
import VueRouter from 'vue-router/vite'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
const __dirname = fileURLToPath(new URL('.', import.meta.url))
VueRouter({
extendRoute(route) {
if (route.name === '/[name]') {
route.addAlias('/hello-vite-:name')
}
},
beforeWriteFiles(root) {
root.insert('/from-root', path.join(__dirname, './src/pages/index.vue'))
},
})🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/docs/zh/file-based-routing/extending-routes.md` around lines 7 - 22,
The example uses __dirname in beforeWriteFiles which is undefined in ESM; fix by
importing fileURLToPath from 'node:url' and defining __dirname using
fileURLToPath(new URL('.', import.meta.url)) before using path.join in
beforeWriteFiles (keep symbols: import of VueRouter, path, fileURLToPath, const
__dirname = fileURLToPath(...), and the beforeWriteFiles/root.insert call).
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
Co-authored-by: edison <daiwei521@126.com>
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
edison1105
reviewed
Feb 28, 2026
Member
|
LGTM. |
edison1105
approved these changes
Mar 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit