vue this.$(-1); How to bring parameters when returning

1. Declare an empty Vue moduleeventBus

import Vue from 'vue'
 
/**
  * Define an empty vue instance to implement communication between non-parent and child components as eventbus (broadcast is removed)
  */
var eventBus = new Vue({});
export default eventBus;

2. "List Page" passedeventBus.$emitPass to the previous page

 import eventBus from '../../../static/js/';
  
 //return        back(info){
          // Pass a map, addressInfo is key, info is value          eventBus.$emit('addressInfo',info);
          //Calling router back page          this.$(-1);
        },

3. Page receiving parameters

 import eventBus from '../../../static/js/';
 
 activated(){
      //Get the passed parameters according to the key name, data is map      eventBus.$on('addressInfo', function(data){
        (data,"data");
      }.bind(this));
    },

Use of vue $(-1)

You may encounter such a problem in the project, which is to jump to the details and return to the original search results, but you don’t want to refresh. At this time, keep-alive plays a big role.

Next, let’s talk about how to use keep-alive to dynamically cache pages.

Just add a layer of keep-alive outside to make it all cached, and it will not refresh if it returns.

For example

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

Use it in conjunction with routing to dynamically cache what you need, rather than cache all

Need to be configured inside

const router = new Router({
    // mode: 'history',
    routes: [{
            path: '/', // This slash is the page that jumps by default            name: 'index',
            component: resolve =&gt; require(['@/components/index'], resolve),
            meta: {
                requiresAuth: true,
                keepAlive: false,
            }
        },
        {
            path: '/index',
            name: 'index',
            component: resolve =&gt; require(['@/components/index'], resolve),
            meta: {
                requiresAuth: true,   //Setting this item means you must log in to enter                keepAlive: false,     //If false, it will not cache at the beginning. If true, it means cache            }
        },
        {
            path: '/index2',
            name: 'index2',
            component: resolve =&gt; require(['@/components/index2'], resolve),
            meta: {
                requiresAuth: true
            }
        }]
}）

Then go to the route navigation guard to handle permissions

I wrote it in route/, it depends on your request.

// Determine whether login permission is required and whether to log in((to, from, next) =&gt; {
    if ( == '/orderDs' ||  == '/interveneDs' ||  == '/afterSaleDs' ||  == '/checkDs' ||  == '/auditDs' ||  == '/addVertising' ||  == '/buyerDs' ||  == '/gsQueryDs') {
         = true;   // Indicates cache list page        next();
    }else{
       = false;
      next();
    }
})

export default router

Next, let's take a look at the processing in

&lt;template&gt;
  &lt;div &gt;
Need to cache
      &lt;keep-alive&gt;
        &lt;router-view v-if="$"&gt;&lt;/router-view&gt;
        &lt;/keep-alive&gt;
不Need to cache
      &lt;router-view v-if="!$"&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;

When we use cache

If we encounter some operations on our interface, then jump back and need to default some data to the original value

You can use watch to listen for $router

watch:{
    $router:{
      handler(val){
        if(==='menberList'){
          ()
        }
      }
    }
  }

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.