如何部分路由保持状态

如何部分路由保持状态

keep-alive exclude 指那些是可以不被保证状态，多个以逗号风格 include 指那些是可以被保持状态，默认所以保持，多个以逗号分隔

<template>
  <div id="app">
    <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
      <div style="height: 100%;background-color: antiquewhite;flex-grow: 1">
        <ul style="padding: 0px">
          <router-link tag="li" replace to="/home" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">首页</router-link>
          <router-link tag="li" replace to="/about" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">关于</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn1Click">按钮1</button>
          </li>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn2Click">按钮2</button>
          </li>
          <router-link tag="li" replace :to="'/dynamic/'+userId" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">动态路由</router-link>
          <router-link tag="li" replace to="/nested" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由</router-link>
          <li>
            <ul>
              <router-link tag="li" replace to="/nested/nested1" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由1</router-link>
              <router-link tag="li" replace to="/nested/nested2" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由2</router-link>
            </ul>
          </li>
          <router-link tag="li" replace :to="params" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">传递参数</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="transferClick">传递参数2</button>
          </li>
        </ul>
      </div>
      <div style="height: 100%;background-color: aqua;flex-grow:6;display: flex;flex-direction: column">
        <div style="background-color: azure;flex-grow: 1">
          我是面包屑
        </div>
        <div style="background-color: cornsilk;flex-grow: 15">
          <keep-alive exclude="Home">
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId:"Icez",
      params: {
        path: '/transfer',
        query: {
          name: 'icez',
          like: '会android、会PHP(YII)、会VUE、会Flutter、会Electron、会Cocos'
        }
      },
      params2: {
        path: '/transfer2',
        query: {
          name: 'icez',
          like: '会android、会PHP(YII)、会VUE、会Flutter、会Electron、会Cocos'
        }
      }
    }
  },
  components: {
  },
  methods: {
    btn1Click(){
      //退入栈中component
      // this.$router.push('/btn1Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn1Component')
    },
    btn2Click(){
      //退入栈中component
      // this.$router.push('/btn2Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn2Component')
    },
    transferClick(){
      this.$router.push(this.params2)
    }
  }
}
</script>

<style>
#app,body,html{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
.active{
  color: red;
}
</style>

效果

在这里插入图片描述