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
路由组件文件夹
···