标签:引入 使用 exp def views redirect 匹配 dex col
1.介绍:该插件可以通过文件名,或者.vue文件的前缀来动态的生成路由,无需自己配置,和nuxt.js相同,具体用法可以参照nuxt.js路由使用
// 安装vue-router-auto npm i vue-router-auto -s // 文档地址 https://www.npmjs.com/package/vue-router-auto // router/index.js import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ // 引入使用 import autoRouter from ‘vue-router-auto‘ Vue.use(VueRouter) // 自动生成路由数据 const routes = autoRouter({ /* 第一个参数是动态生成哪个目录下的文件的路由 第二个参数是否深度遍历 需要匹配的文件夹 */ rc: require.context(‘@/views‘, true, /\.vue$/), // 重定向到哪个路由 redirect: ‘/hook‘ }) const router = new VueRouter({ routes }) export default router
2.创建组件
// 在views目录下新建Login目录,下新建index.vue,对应的路由就是login // 在views目录下新建home.vue,那么对应的路由就是home // 动态路由也就是带参数的路由,新建文件夹或者.vue文件的时候都要带上_前缀 // _id.vue 对应router的路由就是 { path: /:id } // _id目录新建index.vue 对应router路由 { path: /:id } // 更多用法请参照nuxt.js,或者文档
标签:引入 使用 exp def views redirect 匹配 dex col
原文地址:https://www.cnblogs.com/zxuedong/p/12810589.html