vue.动态组件、components和 Vue.component、Vue.nextTick、Vue-router

李富贵~

已于 2023-04-01 17:32:53 修改

阅读量577

点赞数

CC 4.0 BY-SA版权

文章标签： css html 前端

于 2023-04-01 17:29:34 首次发布

本文链接：https://blog.csdn.net/iouytrep/article/details/129900185

文章介绍了在Vue中如何实现组件动态加载和利用keep-alive进行缓存，以及如何添加过渡动画。同时，讨论了Vue-router的使用，包括路由缓存控制和全局路由钩子的运用，如beforeEach、beforeResolve和afterEach，用于实现如登录拦截等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景:做一个 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 函数也不会改变导航本身