通过views文件件自动生成路由文件
引入类库
npm i vue-router-auto -s
文档地址:
https://www.npmjs.com/package/vue-router-auto
配置router下的index.js 文件(配置路由)
import Vue from ‘vue‘ import Router from ‘vue-router‘ // 引入依赖 import autoRouter from ‘vue-router-auto‘ Vue.use(Router) let routes = autoRouter({ // 页面级的.vue存放位置,必传 rc: require.context(‘@/views‘, true, /\.vue$/), // ‘/‘的重定向,可选,默认为‘‘ redirect: ‘/login‘, // 页面级的.vue存放的文件夹,可选,默认为:views rootFile: ‘views‘, }) //插入自定义页面路由 routes.push({ path: ‘*‘, meta: { title: ‘页面走丢了‘ }, component: () => import( ‘@/components/404‘),//404 }) export default new Router({ mode: ‘history‘, base: process.env.BASE_URL, routes, })
配置组件
// 在views目录下新建Login目录,下新建index.vue,对应的路由就是login // 在views目录下新建home.vue,那么对应的路由就是home // 动态路由也就是带参数的路由,新建文件夹或者.vue文件的时候都要带上_前缀 // _id.vue 对应router的路由就是 { path: /:id } // _id目录新建index.vue 对应router路由 { path: /:id } // 更多用法请参照nuxt.js,或者文档
直接起飞!!!