vue前端路由和异步组件

本文探讨了前端路由的重要性和Vue中的实现,包括hash路由和history路由。同时,详细介绍了异步组件的使用原因,如为了解决组件过大导致的加载延迟问题,并展示了在Vue 2.0及3.0中的实现方式。动态组件则允许根据条件在页面上选择性地展示A组件或B组件。最后,对比了异步组件和动态组件的区别,前者在加载时先加载空节点,待组件加载完成后再替换,而后者主要处理的是页面条件变化时的组件切换。
摘要由CSDN通过智能技术生成

路由

前端路由的目的: 在不用请求后端的情况下跳转页面

hash路由

1.通过改变hash值去改变路由
2.通过loacation.hash得到hash值    '#/curriculum'
3.监听事件: hashchange:监听hash的改变做出反应

history路由

1.通过改变hash值去改变路由   
2.通过loacation.pathname得到路由    '/md/'
3.监听事件: popstate:监听浏览器操作引起的路由变化,比如浏览器的回退
4.history还有pushState和replaceState去操作路由栈去改变路由
5.history是在h5的基础上新出的,在对IE9一下的支持不如由来已久的hash
6.history需要进行一些nginx配置解决它找不到对应文件时的请求的后端的入口文件
	## history
	location / {
   
 		root /var/www;
 		index index.php index.html index.htm;
		try_files $uri $uri/ /index.html;
	}

异步组件

为什么使用异步组件?

由于组件过大,从后端拉取某些数据可能要耗时等待,所以我们在一定的条件或者等其他同步组件加载完成之后再异步加载过大的组件,再他加载完成后再使用。(有点类似懒加载)

如何使用异步组件?
vue2.0中

vue.conponent('async-conponent1', function(resolve, reject) {
   
	setTimeout(function() 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值