vue3.0中引入文件路由

项目结构(可以看下面的图片更清楚)

├─index.html
├─package-lock.json
├─package.json
├─vite.config.js
├─src
|  ├─App.vue
|  ├─main.js
|  ├─utils
|  |   ├─adddNoiseTiff.js
|  |   ├─initMap.js
|  |   └request_for_tiffUrl.js
|  ├─store
|  |   └counter.js
|  ├─pages
|  |   ├─about.vue
|  |   ├─index.vue
|  ├─modules
|  |    └router.js

 

安装vite-router

npm i vite-router

安装vite-plugin-pages

npm i vite-plugin-pages

在pages文件夹下创建.vue文件（感觉这块就是用来放主界面的，组件放在component里面）

在modules文件夹下创建router.js，内容如下

import { createWebHistory, createRouter } from 'vue-router'
import routes from '~pages'

const router = createRouter({
    routes,
    history: createWebHistory()
})

export default router

这样就可以访问pages中的所有文件了，如http://localhost:8080/about