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

　　

直接起飞！！！