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

  

直接起飞!!!



vue自动路由/vue自动生成路由

上一篇:nginx之rewrite功能


下一篇:linux系统中tee命令