primers

PC side requirements, drill down layers, and are all list pages. If the new page is created successfully, the page will be returned to the previous page and refreshed. If you edit/create a page and click Back, the cache status of the previous page will be returned.

plan

Hack technique

this.$router.push({
  path: '/product',
  query: {
	t: +new Date()
  }
})
Copy the code

This method, while simple, has significant drawbacks:

  1. Ugly;
  2. Forward refresh, browser back to the previous page on the URL has a timestamp, but click on the breadcrumb jump to no timestamp can only refresh, unless maintaining the page’s timestamp.

Meta Route depth level

<template> <div id="app"> <keep-alive :include="include"> <router-view v-if="$route.meta. KeepAlive "/> </keep-alive> <router-view v-if="! $route.meta. KeepAlive "/> </div> </template> // route.js meta: {keepAlive: true, deepth: x // route hierarchy 1,2,... n }Copy the code

Listen for $route to maintain the include array, drill down to add the current page name (which is the name in.vue) to the array, and back up to remove it.

The defects of this method are:

  1. Poor compatibility, logical deduction is too complex: jump across levels with the same module; Jump between modules with different drilling trips.
  2. Routing files need to be statically configured with a bunch of depths

Vuex

This solution applies to the React framework. Save the Filter information queried in the table, and use the Filter to query the list during the rollback. If you want to go back to the first page, modify the Vuex information before jumping to the next page.

Defects of this scheme:

  1. Not true cache, there is interface request and re-render;
  2. If the page has multiple interface requests, including data kanban, multiple lists, storage becomes complicated;
  3. Scroll position.

KeepAlive refresh scheme

  • Router is used for multiple pages, but vuex is not necessarily used, so the solution is as follows:

  1. EventBus;

  2. Monitor $route changes;

  3. Activated;

  • There are two schemes for refreshing:
  1. Add v-if to the Html tag, change it to false and then change it back to true;
  2. Add include and exclude to the keepAlive tag. Exclude takes precedence over include. The initial value of include is a set of all keepAlive names in the router whose meta is keepAlive. Vue is the same as. Vue. The name value of the refreshed page is pushed into the exclude array and removed after rendering. The logic is much simpler than maintaining the include array.

The first option is more general, and can also be used to refresh the current page by clicking the sidebar (if the current page does not change, it will not start $route change and activated). The second flaw is that you can’t refresh the current page, but it’s more elegant to use the keepAlive built-in method.

<keep-alive :include="include" :exclude="exclude" v-if="keepAliveReload"> <router-view></router-view> </keep-alive> data() { return { keepAliveReload: true, exclude: [] } }, created() { this.keepAliveReloadInit = Object.assign({}, this._data) if (! this.$eventBus._events['keepAliveReload']) { this.$eventBus.$on('keepAliveReload', () => { this.keepAliveReload = false this.$nextTick(() => { Object.assign(this, this.keepAliveReloadInit) }) }) } }, watch: { $route: function(to, from) { if (to.meta.keepAlive && to.meta.reload) { this.exclude.push(to.name) this.$nextTick(() => { this.exclude.pop() Object.assign(this, this.keepAliveReloadInit) }) to.meta.reload = false to.meta.loaded = true } } }Copy the code

Refresh the parameter carrying scheme

  1. Meta meta information;

  2. Params.

    / / plan 1

    this.$route.meta.reload = true

    this.$router.push(‘/pointExchange/accountDetail’)

    // The router guard passes the reload message

    router.beforeEach((to, from, next) => { to.meta.reload = from.meta.reload from.meta.reload = false })

    2 / / solution

    this.$router.push({ name: ‘accountDetail’, params: { reload: true } })

Option 2 has some drawbacks:

  1. Potential collision with route configuration PATH /:reload;
  2. This can only be set successfully with the name jump params parameter.

The advantage of scheme 1 is that there is no restriction on whether $router can jump to path or name, and the possibility of meta meta information conflict is lower.

conclusion

The final scheme is:

KeepAlive cache, in the keepAlive tag v-if, include/exclude implementation refresh, communication for $route listening, EventBus (used for sidebar refresh, see scheme), refresh identification through meta meta information transmission.

In my opinion, this scheme has the highest versatility (no vuEX, multi-page router), simple logic and easy implementation.