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 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
js单例模式的两种方案
Oct 22 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 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
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
利用JS实现数字增长
2016/07/28 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python目录与文件名操作例子
2016/08/28 Python
Python环境变量设置方法
2016/08/28 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python绘制直线的方法
2018/06/30 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
python3 logging日志封装实例
2020/04/08 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
《狐假虎威》教学反思
2014/02/07 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书