一、安装
vite 创建vue项目的时候选择 auto import 【推荐】
二、使用
原理：参考 vite 官网
- 来看一个简单的例子：
这是项目的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]】
- 现在路由已经生成了，现在我们开始修改 router-link 标签
<router-link :to="{ name: '/detail/[id]',params:{id: product.id}}">
...
</router-link>
- router-view 标签不需要做任何修改
三、总结
经过以上步骤，我们已经掌握unplugin- 自动路由的使用了。
现在总结一下：
- 使用 vite 创建 vue 项目的时候，选择 auto import，vite会为你安装并且配置好 unplugin-vue-router
- unplugin-vue-router 根据 src/pages 下的目录结构生成对应的路由，需要怎么设置目录以及怎么命名，请自行查看vite官网中 unplugin-vue-router 的说明
- router-link 标签设置对应的路由
四、不太明白？
附上 github 上的 GIF！一看你就明白了
