码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-30 18:58:27      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:引入   使用   exp   def   views   redirect   匹配   dex   col   

动态生成路由插件

 

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

 

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

标签:引入   使用   exp   def   views   redirect   匹配   dex   col   

原文地址:https://www.cnblogs.com/zxuedong/p/12810589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!