【unplugin-vue-router】超级实用的自动路由，具体使用教程！

一、安装

vite 创建vue项目的时候选择 auto import 【推荐】

二、使用

原理：参考 vite 官网

1. 来看一个简单的例子：

这是项目的pages目录结构

src/pages/
├── index.vue
├── about.vue
└── users/
    ├── index.vue
    └── [id].vue

unplugin-vue-router 会生成以下路由：

• / : -> 渲染 index.vue
• /about : -> 渲染 about.vue
• /users : -> 渲染 users/index.vue
• /users/:id : -> 渲染 users/[id].vue ， id 会变成路由参数 【注意，经过我测试，实际渲染成的路由为 /users/[id]】

2. 现在路由已经生成了，现在我们开始修改 router-link 标签

<router-link :to="{ name: '/detail/[id]',params:{id: product.id}}">
  ...
</router-link>

3. router-view 标签不需要做任何修改

三、总结

经过以上步骤，我们已经掌握unplugin- 自动路由的使用了。
现在总结一下：

1. 使用 vite 创建 vue 项目的时候，选择 auto import，vite会为你安装并且配置好 unplugin-vue-router
2. unplugin-vue-router 根据 src/pages 下的目录结构生成对应的路由，需要怎么设置目录以及怎么命名，请自行查看vite官网中 unplugin-vue-router 的说明
3. router-link 标签设置对应的路由

四、不太明白？

附上 github 上的 GIF！一看你就明白了