vue-router-auto动态生成路由插件

Posted 2021-02-21 zxuedong

动态生成路由插件

 

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，或者文档