精华内容
下载资源
问答
  • 主要介绍了vue 自动化路由实现代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue自动化路由的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 自动化路由实现

    2019-09-29 20:36:17
    那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由。特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edi...

    1.需求描述

    在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹来管理路由,如下图所示

     

     

     那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由。特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue分别对应的事列表页,详情页和编辑页。

     

     

     上图是我们的文件目录,views文件夹中存放的是所有的页面,goodsPlanning是一级目录,onNewComplete和thirdGoods是二级目录,二级目录中存放的是具体的页面,indexComponents中存放的是index.vue的文件,editComponents也是同样的道理。index.vue对应的路由是/goodsPlanning/onNewComplete, edit.vue对应的路由是/goodsPlanning/onNewComplete/edit,detail.vue也是同样的道理。所以我们的文件夹和路由是完全能够对应上的,只要知道路由,就能很快的找到对应的文件。那么有没有办法能够读取我们二级目录下的所有文件,然后根据文件名来生成路由呢?答案是有的

    2. require.context介绍

    官方文档require.context

    简单说就是:有了require.context,我们可以得到指定文件夹下的所有文件

    require.context(directory, useSubdirectories = false, regExp = /^\.\//);

    require.context有三个参数:

    • directory:说明需要检索的目录
    • useSubdirectories:是否检索子目录
    • regExp: 匹配文件的正则表达式

    require.context()的返回值,有一个keys方法,返回的是个数组

    let routers = require.context('VIEWS', true).keys()
    console.log(routers)

     

     

     

     

     

     

     通过上面的代码,我们打印出了所有的views文件夹下的所有文件和文件夹,我们只要写好正则就能找到我们所需要的文件

    3.直接上代码

    import Layout from 'VIEWS/layout/index'
    
    /**
     * 正则 首先匹配./ ,然后一级目录,不包含components的二级目录,以.vue结尾的三级目录
     */
    let routers = require.context('VIEWS', true, /\.\/[a-z]+\/(?!components)[a-z]+\/[a-z]+\.vue$/i).keys()
    let indexRouterMap = {}  // 用来存储以index.vue结尾的文件,因为index.vue是列表文件,需要加入layout(我们的菜单),需要keepAlive,需要做权限判断
    let detailRouterArr = [] // 用来存储以非index.vue结尾的vue文件,此类目前不需要layout
    routers.forEach(item => {
      const paths = item.match(/[a-zA-Z]+/g)  //paths中存储了一个目录,二级目录,文件名
      const routerChild = {  //定义路由对象
        path: paths[1],     
        name: `${paths[0]}${_.upperFirst(paths[1])}`,   //upperFirst,lodash 首字母大写方法
        component(resolve) {
          require([`../../views${item.slice(1)}`], resolve)
        },
      }
      if (/index\.vue$/.test(item)) {  //判断是否以index。vue结尾
        if (indexRouterMap[paths[0]]) {   //判断一级路由是否存在,存在push二级路由,不存在则新建
          indexRouterMap[paths[0]].children.push(routerChild)
        } else {
          indexRouterMap[paths[0]] = {
            path: '/' + paths[0],
            component: Layout,
            children: [routerChild]
          }
        }
      } else {     //不以index.vue结尾的,直接添加到路由中
        detailRouterArr.push({
          path: item.slice(1, -4),   //渠道最前面的 . 和最后的.vue
          name: `${paths[0]}${_.upperFirst(paths[1])}${_.upperFirst(paths[2])}`,
          component(resolve) {
            require([`../../views${item.slice(1)}`], resolve)
          },
          meta: {
            noCache: true,   //不keepAlive
            noVerify: true   //不做权限验证
          }
        })
      }
    })
    
    export default [
      ...Object.values(indexRouterMap),
      ...detailRouterArr,
      /**
       * dashboard单独处理下
       */
      {
        path: '',
        component: Layout,
        redirect: 'dashboard',
        children: [
          {
            path: 'dashboard',
            component: () => import('VIEWS/dashboard/index'),
            name: 'dashboard',
            meta: { title: '首页', noCache: true, noVerify: true }
          }
        ]
      },
    ]

    简简单单的几十行代码就实现了所有的路由功能,再也不用一行一行的写路由文件了。可能你的文件管理方式和我的不一样,但是只要稍微改改正则就行了。

     

    4. 注意

    1. 不能用import引入路由因为用import引入不支持变量
    2. 不能用别名找了半天问题,才知道用变量时也不能用别名,所以我用的都是相对路径

    5.好处

    • 不用在添加路由了,这个就不说了,明眼人都看得出来
    • 知道了路由,一个能找到对应的文件,以前我们团队就出现过,乱写path的情况
    • 更好的控制验证和keepAlive

    转载于:https://www.cnblogs.com/mianbaodaxia/p/11452123.html

    展开全文
  • 为此我们在项目中会专门的一个文件夹来管理路由,如下图所示那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由。特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多...

    1.需求描述

    在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹来管理路由,如下图所示

    8b1691e43e028bdf4d46a3c8ee30c585.png

    那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由。特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue,分别对应的事列表页,详情页和编辑页。

    6de2dce0aa11b804cf01b4ced33f24c4.png

    上图是我们的文件目录,views文件夹中存放的是所有的页面,goodsPlanning是一级目录,onNewComplete和thirdGoods是二级目录,二级目录中存放的是具体的页面,indexComponents中存放的是index.vue的文件,editComponents也是同样的道理。index.vue对应的路由是/goodsPlanning/onNewComplete, edit.vue对应的路由是/goodsPlanning/onNewComplete/edit,detail.vue也是同样的道理。所以我们的文件夹和路由是完全能够对应上的,只要知道路由,就能很快的找到对应的文件。那么有没有办法能够读取我们二级目录下的所有文件,然后根据文件名来生成路由呢?答案是有的

    2. require.context介绍

    简单说就是:有了require.context,我们可以得到指定文件夹下的所有文件

    require.context(directory, useSubdirectories = false, regExp = /^\.\//);

    require.context有三个参数:

    directory:说明需要检索的目录

    useSubdirectories:是否检索子目录

    regExp: 匹配文件的正则表达式

    require.context()的返回值,有一个keys方法,返回的是个数组

    let routers = require.context('VIEWS', true).keys()

    console.log(routers)

    4a4297a45fcdfbc66ff42558fd040a75.png

    通过上面的代码,我们打印出了所有的views文件夹下的所有文件和文件夹,我们只要写好正则就能找到我们所需要的文件

    3.直接上代码

    import Layout from 'VIEWS/layout/index'

    /**

    * 正则 首先匹配./ ,然后一级目录,不包含components的二级目录,以.vue结尾的三级目录

    */

    let routers = require.context('VIEWS', true, /\.\/[a-z]+\/(?!components)[a-z]+\/[a-z]+\.vue$/i).keys()

    let indexRouterMap = {} // 用来存储以index.vue结尾的文件,因为index.vue是列表文件,需要加入layout(我们的菜单),需要keepAlive,需要做权限判断

    let detailRouterArr = [] // 用来存储以非index.vue结尾的vue文件,此类目前不需要layout

    routers.forEach(item => {

    const paths = item.match(/[a-zA-Z]+/g) //paths中存储了一个目录,二级目录,文件名

    const routerChild = { //定义路由对象

    path: paths[1],

    name: `${paths[0]}${_.upperFirst(paths[1])}`, //upperFirst,lodash 首字母大写方法

    component(resolve) {

    require([`../../views${item.slice(1)}`], resolve)

    },

    }

    if (/index\.vue$/.test(item)) { //判断是否以index。vue结尾

    if (indexRouterMap[paths[0]]) { //判断一级路由是否存在,存在push二级路由,不存在则新建

    indexRouterMap[paths[0]].children.push(routerChild)

    } else {

    indexRouterMap[paths[0]] = {

    path: '/' + paths[0],

    component: Layout,

    children: [routerChild]

    }

    }

    } else { //不以index.vue结尾的,直接添加到路由中

    detailRouterArr.push({

    path: item.slice(1, -4), //渠道最前面的 . 和最后的.vue

    name: `${paths[0]}${_.upperFirst(paths[1])}${_.upperFirst(paths[2])}`,

    component(resolve) {

    require([`../../views${item.slice(1)}`], resolve)

    },

    meta: {

    noCache: true, //不keepAlive

    noVerify: true //不做权限验证

    }

    })

    }

    })

    export default [

    ...Object.values(indexRouterMap),

    ...detailRouterArr,

    /**

    * dashboard单独处理下

    */

    {

    path: '',

    component: Layout,

    redirect: 'dashboard',

    children: [

    {

    path: 'dashboard',

    component: () => import('VIEWS/dashboard/index'),

    name: 'dashboard',

    meta: { title: '首页', noCache: true, noVerify: true }

    }

    ]

    },

    ]

    简简单单的几十行代码就实现了所有的路由功能,再也不用一行一行的写路由文件了。可能你的文件管理方式和我的不一样,但是只要稍微改改正则就行了。

    4. 注意

    不能用import引入路由,因为用import引入不支持变量

    不能用别名,找了半天问题,才知道用变量时也不能用别名,所以我用的都是相对路径

    5.好处

    不用在添加路由了,这个就不说了,明眼人都看得出来

    知道了路由,一个能找到对应的文件,以前我们团队就出现过,乱写path的情况

    更好的控制验证和keepAlive

    总结

    以上所述是小编给大家介绍的vue 自动化路由实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • 当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中...

    目的

    解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中去拦截他,总之比你想象的开发还要简单。

    7a501ad9d5fc7e9f05fb74f7209916a6.gif

    简要用法

    具体用法请实时查看github或者npm,下面做一些简要用法介绍

    引用

    const RouterAuto = require('router-auto')

    module.exports = {

    entry: '...',

    output: {},

    module: {},

    plugin:[

    new RouterAuto()

    ]

    }

    项目结构

    package.json 等等文件与目录

    src 项目目录

    page 页面目录

    helloworld

    Index.vue 页面入口

    hello.vue 业务组件

    router.js 额外配置

    demo

    test

    Index.vue 页面入口

    test.vue 业务组件

    Index.vue 页面入口

    home

    Index.vue 页面入口

    上面的目录结构生成的路由结构为

    import Vue from 'vue'

    import Router from 'vue-router'

    import helloworld from '@/page/helloworld/Index.vue'

    import demo from '@/page/demo/Index.vue'

    import demo_test from '@/page/demo/test/Index.vue'

    import home from '@/page/home/Index.vue'

    Vue.use(Router)

    export default new Router({

    mode:'history',

    base:'/auto/',

    routes:[{

    path: '/helloworld/index',

    name: 'helloworld',

    component: helloworld

    },{

    path: '/demo/index',

    name: 'demo',

    component: demo

    },{

    path: '/demo/test/index',

    name: 'demo_test',

    component: demo_test

    },{

    path: '/home/index',

    name: 'home',

    component: home

    }]

    })

    初始化参数配置new RouterAuto(options = {})

    参数

    说明

    类型

    默认值

    必填项

    contentBase

    根目录即src平级目录

    String

    当前根目录process.cwd()

    mode

    router中mode

    String

    history

    base

    router中base

    String

    /auto/

    watcher

    是否启用热更新(请在dev环境启用)

    Boolean

    false

    小缺陷

    首先我们的项目不需要子路由,所以都是平铺路由,但是你可以文件夹中创建文件夹在用文件夹规划子路由,后续会升级几个版本加入进去,当然看看使用了和需求,伪需求都砍掉

    现在生成的.router.js文件在磁盘中,作者以后进一步优化放到内存中,一步一个脚印,共创大好河山

    然后就没缺陷了.... 希望提issue越多越好

    本文参考与相关内容地址

    邮箱 ngaiwe@126.com

    github进来单击star,作者给你么么哒!

    issue百因必有果,你的报应就是我

    nuxt源码参考

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 主要介绍了浅入深出Vue自动化路由,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue自动配置路由

    2020-06-16 17:53:55
    vue项目开发过程中页面太多,路由配置起来也是一件很麻烦的事,好在webpack提供了一个require.contextApi,通过执行require.context函数可以获取一个特定的上下文,实现自动化导入模块。 一、语法 require.context...

    vue项目开发过程中页面太多,路由配置起来也是一件很麻烦的事,好在webpack提供了一个require.context接口,通过执行require.context函数可以获取一个特定的上下文,实现自动化导入模块。

    一、语法

    require.context('./dir', true, /\.js$/);第一个参数表示相对的文件目录,第二个参数表示是否包括子目录中的文件(true,false),第三个参数表示引入的文件匹配的正则表达式。

    二、自动配置路由

    修改router文件夹下的index.js文件即可

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    const contexts = require.context('../pages',true,/\.vue$/)	//通过正则获取匹配到的文件:第一个参数表示相对的文件目录,第二个参数表示是否包括子目录中的文件(true,false),如果有耳机目录既可以设置为true,第三个参数表示引入的文件匹配的正则表达式。
    
    const routers = [];
    contexts.keys().forEach(key=>{	
    	// 获取组件配置
        const componentConfig = contexts(key).default;
    	// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
    	const routePath = key.replace(/^\.\//,'').replace(/\.vue$/,'');
    	// 全局注册组件
    	const component = Vue.component(componentConfig.name,componentConfig);
    	routers.push({
    		path: componentConfig.name==='home'?'/':'/'+routePath,
    		name: componentConfig.name,
    		component
    	})
    		
    })
    
    export default new Router({
      routes: [
    	...routers
      ]
    })

    三、缺点:路由嵌套未解决,望有知道的大佬指点。

    展开全文
  • 在软件开发的过程中,"自动化"这个词出现的频率是比较高的。...为什么要自动化路由 路由自动化在于解决以下的问题: 每次新建页面时的重复操作:在路由文件中添加对应的路由对象。 路由与代码耦合:路由依赖于路由...
  • 近期单独做了一个系统项目,项目不大但是页面太多了,为了后期维护管理容易,做了个自动化加载路由以及模块化的管理。在此记录一下。 直接撸代码 1.首先看目录 router下的index.js是路由配置文件。 views下每...
  • 主要介绍了Vue路由的模块自动化与统一加载实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 自动化导入文件

    2020-03-22 20:16:27
    vue 自动化导入文件 在最近项目中,需要很多模块页面,因此需要创建很多对应的路由模块文件,路由添加每个模块文件很麻烦,因此使用webpack的一个api来解决这个问题 require.context()函数可以自动化导入文件 ...
  • 尝试了两种方案 ...import Vue from 'vue' import Router from 'vue-router' import loginLayout from '@/layout/Login.vue' import mainLayout from '@/layout/Main.vue' const requireComponent = require.c...
  • vue自动路由生成

    千次阅读 2020-07-15 11:38:25
    标题vue-cli自动路由生成 在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹(router)来管理路由,在一个大型项目中,会根据需要配置对应的路由规则,而对应...
  • 你还在一个个路由文件引入而烦恼吗 你还被别人说,你只是一个只会ctrl+ c ctrl +v的码仔吗 做个与世无争的垃圾不好吗 global.ts // 可以把检测的类型去掉,转成js // 关键在于 require.context // 暴露了两个...
  • Vue 路由路由跳转

    2020-11-20 17:32:43
    让根组件自动的挂载其它组件,而不是手动挂载。 安装: cnpm install vue-router --save 在main.js中引入并使用vue-router import VueRouter from 'vue-router' Vue.use(VueRouter) 配置路由 创建组件并在...
  • Vuevue-router路由

    2021-06-03 15:44:43
    模块的、基于组件的路由配置 路由参数、查询、通配符 基于Vue.js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5历史模式或hash模式,在IE9中自动降级 自定义的滚动条行为 2)安装...
  • Vue-4 路由

    千次阅读 2019-08-02 11:49:01
    Vue-4 路由的配置和调用,命名路由和命名视图,嵌套路由,重定向和别名 Vue-router的安装和基本配置 路由Vue 通过操作切换或调用组件的另一种方式。 常见应用场景就是后台管理系统中的选项卡操作。 比如某个后台...
  • Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡...
  • Vue路由的模块自动化与统一加载

    千次阅读 2020-01-06 17:40:51
    首先呢,我们来看看一般项目路由是怎么划分的。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,042
精华内容 8,016
关键字:

vue自动化路由

vue 订阅