Vue路由动态加载

首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,路由配置也会越来越大,路由文件就会变得不好维护

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import Home from ‘@/components/Home‘
import Test1 from ‘./test1.router.js‘
import Test2 from ‘@/components/children/Test2‘
import Test3 from ‘@/components/children/Test3‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/HelloWorld‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path:‘/‘,
      name:‘Home‘,
      component:Home,
      children:[
        {
          path:‘/test2‘,
          name:‘Test2‘,
          component:Test2,
        },
        {
          path:‘/test3‘,
          name:‘Test3‘,
          component:Test3,
        }
      ]

    }
  ]
})

这是一个很简单的路由文件,我们先进性第一步优化,按一级菜单分类:

新建test1.router.js文件,放置一级菜单test1下的所有路由信息

export default {
    path:‘/test1‘,
    name:‘test1‘,
    component: () => import(‘@/components/children/Test1‘),
    children:[]
}
component: () => import(‘@/components/children/Test1‘)这个是配置路由懒加载,优化首屏加载缓慢在index.js里引入该文件
import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import Home from ‘@/components/Home‘
import Test1 from ‘./test1.router.js‘
import Test2 from ‘./test2.router.js‘
import Test3 from ‘./test3.router.js‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/HelloWorld‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path:‘/‘,
      name:‘Home‘,
      component:Home,
      children:[
        Test1,
        Test2,
        Test3
      ]

    }
  ]
})

做到这块,已经可以满足很多项目了,路由文件已经很清晰了,但当项目较大,依然会不清晰

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘

Vue.use(Router)

let routers = [];

let getALLRouterMsg = (paths) => {
    paths.keys().forEach(
        (key) => routers.push(paths(key).default)
    )
}
getALLRouterMsg(require.context(‘.‘,true,/\.router\.js/))
export default new Router({
  routes: [
    {
      path:‘/‘,
      name:‘Home‘,
      component:Home,
      children:[
       ...routers
      ]

    }
  ]
})
 

原文地址:https://www.cnblogs.com/tylz/p/11412317.html

时间: 2024-11-06 09:39:45

Vue路由动态加载的相关文章

vue 路由懒加载

题外: 我司目前的后台管理网站依旧是 jq + xxUI 构成的 ,早就想把 丫儿 个换成 vue了, 苦于整个组几乎一致处于一个忙碌的状态,没有时间来重构. 然鹅,昨天今天组长找到我说要用 vue 搞起来,这个问题不大,毕竟之前用他完成了几个项目,颇有收获,教训满满. 看着 左侧 冗长菜单 item ,不禁陷入了沉思. 当打包构建应用时,Javascript 包会变得非常大,首次加载即便使用了 各种 LOADING ,各种 动画,肯定体验贼差, 如果我们能把不同路由对应的组件分割成不同的代码块

vue路由懒加载及组件懒加载

vue路由懒加载及组件懒加载: https://www.cnblogs.com/-roc/p/9983177.html 一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1.未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'v

【凡尘】---vue路由懒加载---【vue】

一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 简单的说就是:进入首页不用一次加载过多资源造成用时过长 三.非懒加载的路由配置项 四.vue异步组件实

vue路由懒加载

当打包构建应用时,javascript包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合Vue的异步组件和webpack的code splitting feature,轻松实现路由组件的懒加载. 我们要做的就是把路由对应的组件定义成异步组件: const Foo = resolve => { // require.ensure 是webpack的特殊语法,用来设置code-split point // 代

Vue动态加载异步组件

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好

Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具

工具来源: Nodejs需要手动加载路由文件,如果一个个添加,项目逐渐扩大,比较麻烦. 尤其在项目route目录下,增加模块文件夹的时候,引入路由更是麻烦. 因此写了一个Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具,取名为route.js. 支持无限级别目录结构,自动递归引用.有任何更好的建议,欢迎随时留意交流. 使用方法: 1.文件:app.js同级目录增加route.js文件,复制下面贴出源代码: 2.引入:app.js中引入:var route = require(

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据

需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 2.改用query进行传参后,页面刷新后图片无法加载,这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值,而赋值之后页面已经渲染完成,导致图片无法加载成功 解决方案: 1.通过localStorage将数据持久化,在跳转到当前路由时,先使用localStorage将数据持久

vue项目实现路由按需加载(路由懒加载)的3种方式

为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 vue异步组件es提案的import()webpack的require,ensure()1 . vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用