VUE路由动态加载实例代码讲解


Posted in Javascript onAugust 26, 2019

首先新建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
   ]

  }
 ]
})

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 #Javascript
vue-router路由模式详解(小结)
Aug 26 #Javascript
vue+moment实现倒计时效果
Aug 26 #Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 #Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
You might like
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
Vue配置marked链接添加target="_blank"的方法
2019/07/19 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
使用pycharm生成代码模板的实例
2018/05/23 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
如何解决安装python3.6.1失败
2020/07/01 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
J2EE面试题
2016/03/14 面试题
编辑个人求职信范文
2013/09/21 职场文书
社区十八大感言
2014/01/19 职场文书
机关门卫制度
2014/02/01 职场文书
四下基层实施方案
2014/03/28 职场文书
安全生产责任书范本
2014/04/15 职场文书
安全例会汇报材料
2014/08/23 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Python语言内置数据类型
2022/02/24 Python