精华内容
下载资源
问答
  • vue 自动注册路由

    2020-06-28 21:41:43
    // 插件-路由 ...//自动注册路由- page目录下的一级vue文件 require.context('./page', true, /\.vue$/).keys().forEach(fileName => { let componentName = fileName.replace(/^\.\//,'').replace.

    main.js中 

    // 插件-路由
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    import {routes} from "./routes";
    
    //自动注册路由- page目录下的一级vue文件
    require.context('./page', true, /\.vue$/).keys().forEach(fileName => {
      let componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
      let  temp = {
        path: '/'+componentName,
        component:resolve => require(["@/page/"+componentName], resolve)
      }
      routes.push(temp)
    });
    
    const router = new VueRouter({
      routes
    })

    page文件夹和main.js同级

    展开全文
  • 那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由。特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.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
      ]
    })

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

    展开全文
  • vue路由自动注册

    2020-12-08 17:44:59
    根据src/views文件夹的路径自动注册路由,文件结构如下: src |--view |----page1 // 页面一 |------components // 页面一的组件 |------index.vue // 页面一的入口组件 |----page2 // 页面2 |------components // ...

    记录一下vue路由自动注册的一种方式
    根据src/views文件夹的路径自动注册路由,文件结构如下:

    src
    |--view
    |----page1 // 页面一
    |------components // 页面一的组件
    |------index.vue // 页面一的入口组件
    |----page2 // 页面2
    |------components // 页面2的组件
    |------index.vue // 页面2的入口组件
    |----index.vue // 公共的布局组件
    

    router/index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    important index from '../views/index.vue'
    
    // 路由自动化注册
    const requireComponent = require.context('@/views', true, /index.vue$/) // 找到views路径下的所有文件
    const dynamic_route = requireComponent.keys().filter(fileName => {
      if(fileName === './index.vue') { // 过滤掉父节点的路由
        return false
      } else {
        return true
      }
    })
    .map(fileName => {
      const componentConfig = requireComponent(fileName)
      const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'')// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
      const componentNameRe = componentName.replace(/\//g,'-') // 设置name为文件夹名-index
      const component = Vue.component(componentNameRe,componentConfig.default || componentConfig) // 根据路径注册成组件
      const result = {
        path: componentName,
        name: componentNameRe,
        component
      }
      return result
    })
    const routes = [
      {
        path: '/',
        component: index,
        name:'index',
        children: dynamic_route
      }
    ]
    export default routes
    
    
    
    展开全文
  • import {createRouter, createWebHistory} ...// 路由自动注册 const requireComponent = require.context('@/modules', true, /\.vue$/) // 找到 modules 路径下的所有文件 const dynamic_route = requireComp.
    import {createRouter, createWebHistory} from 'vue-router'
    import{ createApp } from 'vue'
    const app = createApp({})
    
    // 路由自动化注册
    const requireComponent = require.context('@/modules', true, /\.vue$/) // 找到 modules 路径下的所有文件
    
    
    const dynamic_route = requireComponent.keys().filter(fileName => {
      if (fileName === './index.vue') // 过滤掉父节点的路由
        return false
      else
        return true
    }).map(fileName=>{
      const componentConfig = requireComponent(fileName)
      const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'')// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
      const componentNameRe = componentName.replace(/\//g,'-') // 设置name为文件夹名-index
    
      // 注册组件 start
      // 注意:什么时候应用程序组件(…)提供了一个definition对象(第二个参数),它返回应用程序实例(以便允许链接调用)。要获取组件定义,请省略定义对象并仅提供名称
      // https://stackoverflow.com/questions/64409157/vue-js-component-is-missing-template-or-render-function
      app.component(componentNameRe,componentConfig.default)
      const Component = app.component(componentNameRe) // 根据路径注册成组件
      // 注册组件 end
    
    
      const result = {
        path: `/${componentName}`,
        name: componentNameRe,
        component:Component
      }
      return result
    })
    
    const routes = dynamic_route
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router
    

    https://github.com/r70kg/vue3

    展开全文
  • 示例的自动注册路由方法在实际项目中可能并没有太大的实用性,依项目复杂度而定 另一个关于 require.context 的示例 demo 只作为抛砖引玉,欢迎大家补充 注意:本 demo 仅在 posix 型系统下有效,比如 macOS,...
  • Vue工具,快速创建view/conmoment/store,自动注册路由等,简化开发 可以使用命令行快速创建页面,组件,store等 优点: 1.减少手动敲代码的时间,自动注册路由,快速创建全局组件/局部组件,快速创建store 2.有助于统一文件...
  • 动态路由注册 动态组件注册 动态路由路由模块化 vue: provider inject slot数据通信模式 项目配置 package.json配置开发和打包指 令 "serve:demo1": "vue-cli-service serve --progress demo1", "build:demo1": ...
  • Vue路由

    千次阅读 多人点赞 2020-12-09 21:19:13
    Vue路由Vue路由基础嵌套路由路由重定向路由传参params形式传参query形式传参params方式与query方式的区别编程式路由利用JS实现路由跳转通过watch实现路由监听导航守卫 Vue路由基础 Vue属于单页应用(SPA),即整个...
  • Vue中的路由

    2019-04-01 22:43:58
    Vue中的路由 对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成。 安装 基于传统,我更喜欢采用npm包的形式进行安装。 npm install vue-router --save 当然,官方采用了...
  • vue-router 路由

    2020-06-10 09:17:32
    vue-router 路由库 一、第一个 vue-router 路由 本节视频 【视频】Vue 渐进式 JavaScript 框架-VueRouter-第一个路由 概述 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用...
  • vue 根据菜单自动生成路由(动态配置前端路由)1.创建项目2.新建文件3.到main.js中4.先把菜单组件写好,到menu.vue中5.注册全局组件6.到router文件夹写好路由模块6.1 base-router.js中写好我们需要的固定的路由6.2 ...
  • 有没有因为新建view,component,store的繁琐操作而苦恼,需要新建文件件,新建vue文件,新建js文件,注册路由...等一系列无价值操作浪费时间,为了解决这个问题,也在掘进看了一些文章引发的思路,自己就利用node操作文本的...
  • v 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 主要是使用require.context函数,这个函数的作用是获取一个特定的上下文,主要用来实现自动化导入模块,vue官方文档上叫‘基础组件的自动化全局注册’。vue官方文档的描述 上代码: Vue.use(Router) const contexts ...
  • Vue--路由

    2021-10-04 10:24:13
    Vue中的路由是什么? 路径和组件的映射关系 2. 为何用--路由 ? 2.1 目标 了解为何要学习和使用路由 2.2 讲解 目标: 在一个页面里, 切换业务场景 具体使用示例: 网易云音乐 网易云音乐 单页面...
  • vue3.0路由自动导入

    千次阅读 热门讨论 2021-04-07 16:01:15
    一、前提 我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须...和公共组件注册一样,我们只注册index.vue组件,其他名称的组件不进行注册。 三、导入 // src/router/i
  • vue-router使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。比如,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。在项目目录下通过npm安装vue-router: npm install vue-...
  • Vue中路由(VueRouter) 13.1 路由 路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理 13.2 作用 用来在vue中实现组件之间的动态切换 13.3 使用路由 1. 引入路由 <...
  • Vue入门 - 路由vue-router

    2019-06-13 12:34:33
    Vue入门 - 路由vue-router7.路由vue-router7.1.场景模拟7.1.1.编写父组件7.1.2.编写登录及注册组件7.1.3.在父组件中引用7.1.5.问题7.2.vue-router简介和安装7.3.快速入门 7.路由vue-router 7.1.场景模拟 现在我们来...
  • vue-router 路由

    2020-05-19 14:06:08
    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换. ...
  • 1.3 vue-router 2. 路由的规则 2.1 路由的 history 模式 2.2 路由的 hash 模式 2.3 两种模式的区别 3. router-link 4. 基本使用 5. 路由重定向与别名 6. 动态路由的使用 7. 懒加载 8. 嵌套使用 9.路由传递参数 10. ...
  • vue 中的路由路由嵌套以及钩子函数 什么是路由呢? 在网络原理中路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。 而在web开发中,路由就是URL到函数的映射。 使用Vue开发项目,我们需要...
  • vue路由

    2019-09-11 20:52:14
    Vue Router 是 Vue.js 官方的路由管理器。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 带有自动激活的 CSS class 的链接 HTML5 ...
  • 路由自动配置 在指定文件夹里创建文件,就可以制动配置路由 在src下创建路由配置router文件夹 在router文件夹下创建index.js文件 在index.js文件下引入vue-router(代码如下)npm i vue-router src->router->...
  • vue-router路由基础

    2019-07-02 20:50:37
    Router 路由相关 SPA ( single page App ) 单页面应用 多页面应用 ... 缺点 开发起来太冗余,编译、压缩很耗时间 页面之间的跳转速度太慢 ...单页面内容之间的切换要想实现,就是用路由了 ...vue路由...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,913
精华内容 3,965
关键字:

vue自动注册路由

vue 订阅