场景:做一个 tab 切换时就会涉及到组件动态加载
<component v-bind:is="currentTabComponent"></component>
但是这样每次组件都会重新加载,会消耗大量性能,所以<keep-alive> 就起到了作用
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
这样切换效果没有动画效果,这个也不用着急,可以利用内置的<transition>
<transition>
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
</transition>
components和 Vue.componentcomponents
:局部注册组件export default{ components:{home}}
Vue.component:全局注册组件
Vue.component('home',home)
Vue.nextTick
2.1.0 新增
场景:页面加载时需要让文本框获取焦点
用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
this.$nextTick(() => {
this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法
})
}
作者:程序员小猴
链接:https://zhuanlan.zhihu.com/p/609112106
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Vue-router
场景:Vue-router 是官方提供的路由插件
1 缓存和动画
1.路由是使用官方组件 vue-router,使用方法相信大家非常熟悉;
2.这里我就叙述下路由的缓存和动画;
3.可以用exclude(除了)或者include(包括),2.1.0 新增来坐判断
<transition>
<keep-alive :include="['a', 'b']">
//或include="a,b" :include="/a|b/",a 和 b 表示组件的 name
//因为有些页面,如试试数据统计,要实时刷新,所以就不需要缓存
<router-view/> //路由标签
</keep-alive>
<router-view exclude="c"/>
// c 表示组件的 name值
</transition>
注:匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配
4.用 v-if 做判断,组件会重新渲染,但是不用一一列举组件 name
30.2 全局路由钩子
1.router.beforeEach
router.beforeEach((to, from, next) => {
console.log('全局前置守卫:beforeEach -- next需要调用') //一般登录拦截用这个,也叫导航钩子守卫
if (path === '/login') {
next()
return
}
if (token) {
next();
}
})
2.router.beforeResolve (v 2.5.0+)
和beforeEach类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
即在 beforeEach之后调用
3.router.afterEach
全局后置钩子
在所有路由跳转结束的时候调用
这些钩子不会接受 next 函数也不会改变导航本身
作者:程序员小猴
链接:https://zhuanlan.zhihu.com/p/609112106
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
作者:程序员小猴
链接:https://zhuanlan.zhihu.com/p/609112106
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。