vue自動路由/vue自動生成路由

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

　　

直接起飛！！！