《和小米一起学Vue.js》— 路由保活 keep-alive

路由在切换的时候会自动销毁老路由并新建一个新路由来显示。有些时候我们会切换路由（地址），但是希望之前页面的数据不要被清空。这时候就需要用到 Vue 的一个组件 keep-alive 来使我们的路由持续保活。

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link :to="{path:'/user',query:{'uid':55}}">User</router-link>
    </nav>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>
<script>
export default {
}
</script>

我们只需要在原来的 <router-view/> 外面包裹上 <keep-alive> 即可实现保活。

<template>
  <div>
    <h1>这里是user页面</h1>
    <h2>当前的用户ID是:{{$route.query.uid}}</h2>
    <div><input type="text"></div>
  </div>
</template>

这个时候，不论我们怎么切换路由，都不会清空我们的输入框的内容。

代码下载

下载地址：  密码：g5gy