vue-router-auto動態生成路由插件

動態生成路由插件

 

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