【VUE】2022.6.17 今日所学

一、动态组件

1.v-bind：is=“中间data”

<button @click="changetest">Change</button>

<components :is="zujian"></components>

设置data中

zujian: TrunAround,

设置函数事件

changetest() {
      if (this.zujian == TrunAround) {
        this.zujian = ImageView;
      } else {
        this.zujian = TrunAround;
      }
    },

2.通过设置路径变化来进行组件的切换

首先需要在router中index.js中设置好准备调用的组件路径和名称

{
    path: "/goods",
    name: "goods",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Goods.vue"),
  },
  {
    path: "/car",
    name: "car",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Car.vue"),
  },

然后在对应位置定义好跳转函数，函数设置如下

    jumpgoods() {
      this.$router.push("/goods");
    },
    jumpcar() {
      this.$router.push("/car");
    },

二、keep-active

目前所学了解到的内容，大致就是用keep-active来进行缓存，不要每次都重新创建然后销毁。

经常用到的地方就是浏览位置的保存（就是滚动条的保存这样），或者官网给的例子是组件切换时之前打开的内容被销毁了，利用keep-active来进行保存，详见：

动态组件 & 异步组件 — Vue.js (vuejs.org)