How to implement page caching in vue2.0

vue News item

data request is to monitor route changes by clicking on the above categories (so the categories share a data request page). As long as the route changes, the data will be requested, so that the data requested by the page cannot be cached

watch: {
    $route: function() {
      // if (this.routerChange) {
        this.getNews()
      // }
    }
  },
  methods: {
    ...mapActions(["getList", "dowmLoadmore"]),
    getFirstNews(){
      this.getList({
        channel: this.firstName,
        type: this.firstType,
        flag: this.routerChange
      })
    },
    getNews() {
      this.getList({
          channel: this.$route.query.type,
          type: this.$route.params.type,
          flag: this.routerChange
        })

keep-alive is also enabled

{
      path: "/header",
      name: "Header",
      component: Header,
      meta:{  keepAlive: false },
      children: [
        {
          path: "/home/:type",
          name: "Home",
          component: Home,
          meta:{  keepAlive: true  }
        }
      ]
    },

now, as long as you switch categories, the page will refresh. I don"t know how to change it

May.06,2022

you can save the data of each column with different fields. When you click switch, you can determine whether the corresponding field data is empty or not, send the request data if it is empty, and render directly if it is not empty. This is the way I can think of. You have a component, different data, you can't cache it.


    <keep-alive>
      <router-view></router-view>
 </keep-alive>

write your parent container Header like this

Menu