当前位置： 移动技术网 > IT编程>网页制作>CSS > 如何使vue2路由后退不刷新？（代码设置）

如何使vue2路由后退不刷新？（代码设置）

2018年02月12日  | 移动技术网IT编程  | 我要评论

如何使vue2路由后退不刷新？（代码设置）

1. 设置路由为两种情况，路由meta.keepAlive为true/false,true则运行缓存路由组件，false则重新加载路由组件
 
    
        
    



    

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();
    }
};

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网