Skip to content

Commit 0d35ceb

Browse files
committed
docs: add page-component
1 parent 137c4b2 commit 0d35ceb

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

vue3-vant-mobile/routing.md

+43
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,46 @@ src/pages/
3434
::: tip
3535
通常,您只需创建业务页面即可,如果您希望深入了解并进行高级配置,请访问 [官网](https://uvr.esm.is/)
3636
:::
37+
38+
## 常见问题 {#FAQ}
39+
40+
### 如何创建页面组件? {#page-component}
41+
42+
一般来说,放在 `src/components` 文件夹下的 `.vue` 文件被统称为应用的公共组件。如果要创建页面级组件,也就是只属于某个页面的专用组件,通常会放在 `src/pages/**/components` 目录下。然而,正如之前提到的,`src/pages` 下的所有文件都会被扫描并生成路由,这会导致页面内的组件也生成路由,这并非我们期望的效果。
43+
44+
为了避免这种情况,我们需要设置插件忽略特定的扫描规则。我们可以像这样设置:
45+
46+
```ts
47+
// build/vite/index.ts
48+
export function createVitePlugins() {
49+
return [
50+
VueRouter({
51+
extensions: ['.vue'],
52+
routesFolder: 'src/pages',
53+
exclude: ['src/pages/**/components/**'], // [!code ++]
54+
dts: 'src/typed-router.d.ts',
55+
}),
56+
]
57+
}
58+
59+
```
60+
61+
同时,为了让页面专用组件也可以自动导入,我们还需要像这样设置:
62+
63+
```ts
64+
// build/vite/index.ts
65+
export function createVitePlugins() {
66+
return [
67+
Components({
68+
extensions: ['vue'],
69+
resolvers: [VantResolver()],
70+
include: [/\.vue$/, /\.vue\?vue/],
71+
dts: 'src/components.d.ts',
72+
dirs: ['src/components'], // [!code --]
73+
dirs: ['src/components', 'src/pages/**/components'], // [!code ++]
74+
})
75+
]
76+
}
77+
```
78+
79+
这样,我们就可以在页面内使用专用组件,而无需导入,也不会生成多余路由了。

0 commit comments

Comments
 (0)