VUE returns the page without refreshing the implementation code

Implemented with VUE’s default keep-alive component

Implementation method:

1. Set whether the page needs to be cached in the route.

Example code :(add meta object in required component, keepAlive property, keepAlive value is whether to cache component)

    {
      path:'/UpInfo'.name:'UpInfo'.component:UpInfo,
      meta: {keepAlive:true
      }
Copy the code

2. Use router-view in app.vue;

Use keep-alive to wrap the router-view in app. vue and determine whether the Settings in the route need to be cached.

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive'/>
    </keep-alive>
      <router-view v-if='! $route.meta.keepAlive'/>
  </div>
</template>
<script>
  export default {
    data() {
      return{}},methods: {},
    mounted(){}}</script>
<style scoped />
Copy the code

To complete. Just two steps