站内搜索:
首页 >> 前端 >> 内容
如何使vue2路由后退不刷新?(代码设置)

时间:2018/2/12 14:09:08

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

  • 上一篇:CSS自适应布局等分比例实践分析
  • 下一篇:微信小程序开发之设置Button边框border
  • 返回顶部