牛骨文教育服务平台(让学习变的简单)
博文笔记

如何使vue2路由后退不刷新

创建时间:2018-02-11 投稿人: 浏览次数:485
1. 设置路由为两种情况,路由meta.keepAlive为true/false,true则运行缓存路由组件,false则重新加载路由组件
<keep-alive> 
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件,比如 Home! -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>
2. 给路由配置设置meta参数

// routes 配置
export default [
  {
    path: "/",
    name: "home",
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: "/:id",
    name: "edit",
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]
3. 在组件内设置路由是否重新加载

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // 让 A 缓存,即不刷新
        next();
    }
};

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。