Vue2复习

Vu2复习

路由守卫

全局路由守卫

1.前置全局路由守卫(三个参数)

​ 编写位置:在配置路由处编写全局路由守卫

const router=new VueRouter({

})
router.beforeEach(( to , from , next,)=>{
	//to:目标位置,要去哪
	//from:来自哪
	//next:放行
})

前置全局路由守卫:每次路由切换前被调用,主要用于鉴权

2.后置全局路由守卫(两个参数)

​ 编写位置:同前置全局路由守卫相同

const router=new VueRouter({

})
router.afterEach(( to , from )=>{
	//to:目标位置,要去哪
	//from:来自哪
})

后置全局路由守卫:每次路由切换之后被调用,一般可以用来改变页签状态

独享路由守卫(3参)

​ 编写位置:配置在单个路由配置项中,与meta配置项平级

mate{Isshow:true},
beforeEnter(( to , from , next,)=>{
	//to:目标位置,要去哪
	//from:来自哪
})

独享路由守卫只有前置没有后置,可与后置全局路由守卫配合使用

组件内路由守卫

编写位置:在vue组件中编写

1.进入守卫
beforeRouteEnter(to,from,next){

}

进入守卫:通过路由规则进入路由组件之前

2.离开守卫
beforeRouteLeave(to,from,next){

}

离开守卫:通过路由规则离开路由组件之前

进入/离开 守卫 与 前置/后置 守卫不同,

当路由home跳转至login完毕,login前置和后置都执行完毕,进入守卫执行完毕,而并为执行离开守卫

此时继续,跳转至search,执行login离开守卫。

hash模式和history模式区别

1.hash 路径上带有/#/login?username=xxx,而history路径上干干净净

2.hash兼容性好,history兼容性略差

3.项目上线时,刷新会出问题,会连同/后缀 都向服务器请求,但是服务器没有这些静态资源报404

解决办法:1.靠后端配合,根据带来的资源进行匹配,利用插件进行正则匹配2.Nginx

如何修改这个模式,在于routes平级,有一个配置项mode:'history‘

mixin

混入:复用js代码和vue3中的hook差不多

怎么用?

创建文件mixin.js

export const mixinOne={
	//···共用代码··例子如下
	methods:{
		xxx(){
			console.log(',,,')
		}
	}
}
//分别暴露

在组件中引入

import { mixinOne} from './mixin.js'
export default{
	data(){},
	mixins:[mixinOne]
	
}

如何混合中数据,方法冲突,以当前组件配置为主

如果是生命钩子出现冲突了,都需要,只是顺序是混合在前,当前组件为后

同时也可以全局引入,在main.js中,引入---->Vue.mixin(mixinOne)

自定义指令

需要亲自操作DOM

函数式:

······
//数据放大十倍,初始值为1,n已在data中定义
<span v-big='n'><span>
······

directives:{

 big(参数1 element:真实的DOM span  ,参数2:binding绑定:n){
 	element.innerText=binding.value*10
 }

}

上述例子中,Big函数何时会被绑定:1.指令与元素成功绑定时被执行 2.所依赖的数据更新时,指令所在的模板重新解析时,发生改变

对象式:

······
//数据放大十倍,初始值为1,n已在data中定义
<span v-big='n'><span>
······

directives:{

 fbind:{
 //指令与元素成功绑定时
 	bind(element,binding){},
 //指令所在元素被插入时
 	insert(element,binding){},
 //指令所在模板被重新解析时,被执行
 	update(element,binding){}
 }

}

分析脚手架

babel.config.js

es6转es5…

babel就是babel的控制文件

package.json

包的说明书,采用的依赖,用的库…

package-lock.json

包版本的控制文件,锁住版本,下载依赖的时候都会指定专属版本

Src

main.js

入口文件

app.vue

根组件

assets

静态资源

components

全局组件

views或者pages

路由组件文件夹

···

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值