diff --git a/vue3-vant-mobile/routing.md b/vue3-vant-mobile/routing.md index 407fc4d..1d8f65a 100644 --- a/vue3-vant-mobile/routing.md +++ b/vue3-vant-mobile/routing.md @@ -34,3 +34,46 @@ src/pages/ ::: tip 通常,您只需创建业务页面即可,如果您希望深入了解并进行高级配置,请访问 [官网](https://uvr.esm.is/)。 ::: + +## 常见问题 {#FAQ} + +### 如何创建页面组件? {#page-component} + +一般来说,放在 `src/components` 文件夹下的 `.vue` 文件被统称为应用的公共组件。如果要创建页面级组件,也就是只属于某个页面的专用组件,通常会放在 `src/pages/**/components` 目录下。然而,正如之前提到的,`src/pages` 下的所有文件都会被扫描并生成路由,这会导致页面内的组件也生成路由,这并非我们期望的效果。 + +为了避免这种情况,我们需要设置插件忽略特定的扫描规则。我们可以像这样设置: + +```ts +// build/vite/index.ts +export function createVitePlugins() { + return [ + VueRouter({ + extensions: ['.vue'], + routesFolder: 'src/pages', + exclude: ['src/pages/**/components/**'], // [!code ++] + dts: 'src/typed-router.d.ts', + }), + ] +} + +``` + +同时,为了让页面专用组件也可以自动导入,我们还需要像这样设置: + +```ts +// build/vite/index.ts +export function createVitePlugins() { + return [ + Components({ + extensions: ['vue'], + resolvers: [VantResolver()], + include: [/\.vue$/, /\.vue\?vue/], + dts: 'src/components.d.ts', + dirs: ['src/components'], // [!code --] + dirs: ['src/components', 'src/pages/**/components'], // [!code ++] + }) + ] +} +``` + +这样,我们就可以在页面内使用专用组件,而无需导入,也不会生成多余路由了。