A new TAB is added to each menu bar in the project, and a new TAB is added to the edit and create plans in a project.

The routing names and component names of different editing plans are the same, but the routing parameters are different, as shown in the following figure:

Because keep-alive is used, the data will not be refreshed the next time you open the editing interface for the same route and parameters.

Check that the value of activated is activated. If the value of activated is activated, the value of activated is activated. If the value of activated is activated, the value of activated is activated.

When vuEX is used in the project, check whether the activated edit plan ID exists in store before initialization in the Activated hook. If it exists, initialization is skipped. If not, store the ID to the store and perform an initial flush of data. The code is as follows:

// store
storeIds: {
  createdPlan: {isOpened: false, ids: []}} // Edit scheduleactivated () {
    if (this.$store.state.storeIds.createdPlan.ids.includes(`${this.parme.id}${this.parme.type}`)) return;
    let storeIds = Object.assign({}, this.$store.state.storeIds);
    storeIds.createdPlan.ids.push(`${this.tabParme.id}${this.tabParme.type}`);
    this.$store.commit('updateStoreIds', storeIds); xxx... Initialize the}Copy the code

After the TAB is closed, delete the corresponding ids in storeIds and initialize them next time. The code is as follows:

let storeIds = Object.assign({}, this.$store.state.storeIds);
storeIds.createdPlan.isOpened = false;
storeIds.createdPlan.ids.splice(storeIds.createdPlan.ids.indexOf(`${item.parme.id}${item.parme.type}`), 1);
this.$store.commit('updateStoreIds', storeIds);
Copy the code

This is the basic implementation idea, if there are other better methods, please leave a message