Vue-Router中的keep-alive使用（自我理解）

时间：2025-04-08 14:40:51

参考：coderwhy老师视频

作用
保持之前页面所选展示内容不被默认内容替换（比如在首页有两个按钮，一个是首页新闻，一个是首页消息，默认展示新闻页面，当点击消息页面后，这时需要跳转到关于页面，再次点击首页是仍然需要展示之前点击的消息页面内容，而不是一开始默认的新闻内容，这时就需要使用keep-alive来保护跳转前的路由状态不被销毁）

理解构思

  1. 需要先通过脚手架创建项目（vue create routerkeepalive）
  2. 在内部有两个子页面和
  3. 想要渲染当前组件需要使用router-view, 需要跳转当前组件需要使用router-link
  4. 路由中的首页内部映射关系重定向默认没有，通过中的data给设置默认路径跳转
  5. router表示当前创建的路由对象，可以通过$(跳转路径)跳转页面；route表示当前活跃路由，在哪个页面当前的route就是谁
  6. keep-alive组件/元素/标签需要包裹住想要保存缓存的渲染组件router-view
  7. keep-alive有两个属性include(包含)和exclude(排除)，可以通过设置该属性=组件name来决定当前组件是否被keep-alive保护(当设置exclude属性时，表示当前组件页面刷新时可以频繁的被创建和销毁，不会被缓存)
  8. 只有使用keep-alive时，方法中的activated可以使用，表示当前活跃的路由的默认展示，可以通过$(路径)展示当前页面内容
  9. beforeRouteLeave表示当前活跃路由离开前，可以保存当前路径 = this.$

代码展示

<template>
  <div>
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/user">User</router-link>
    <keep-alive exclude="About">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
.active {
  color: #1890ff;
}
</style>

Home/

<template>
  <div>
    <h2>Home</h2>
    <router-link to="/home/news">news</router-link> | 
    <router-link to="/home/message">message</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      path: '/home/news'
    }
  },
  // activated可以设置当前活跃路由默认展示路径，但是必须和keep-alive才会有效，给最大的router-view设置keep-alive
  activated() {
    this.$router.push(this.path);
  },
  // beforeRouteLeave当前活跃路由离开前，可以记录离开前保存的路径
  beforeRouteLeave(to, from, next) {
    // 修改保存最新的path
    this.path = this.$route.path;
    // 必须执行next()
    next();
  }
}
</script>

<style>

</style>


import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Home = () => import('../views/');
const HomeNews = () => import('../views/');
const HomeMessage = () => import('../views/');

const About = () => import('../views/');
const User = () => import('../views/');

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user',
    component: User
  }
];

const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
});

export default router;

HomeNews/

<template>
  <div>
    <p>HomeMessage</p>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeMessage'
}
</script>

<style>

</style>

​

相关文章