vue单文件组件构建vue项目的若干技巧或建议上海

keepAlive组件结合导航守卫应对特殊境况

合保加华雷斯语档中对keepAlive的运用表明很详细,这里这关键想讲一下本身在动用的经过中遇见的一些主题材料及解决办法。

大家都精晓,在vue-router路由安插中,配置了有个别route的meta属性的keep阿里ve键值为true,然后在路由视图将元属性keepAlive为true的路由包涵在keep-alive标签内,则该路由在第四回访谈后很被缓存,直到会话停止才删除。

//router配置部分
export default [{
  path: '/',
  component: App,
  children: [{
    path: '',
    redirect: '/home'
  }, {
    path: '/home',
    component: home,
    meta: {
      keepAlive: true
    }
  }]
}]

//app.vue部分
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

但不经常我们想要的是选择在迈入的时候缓存,后退的时候不缓存,或然是从有个别路由跳转访谈时不缓存,那个时候路由导航守卫就起到了意义。

上海时时乐走势图官网 1

如上图,在manage.vue文件中,我们供给点击加多的都市后跳转回首页,并滚动到新添的城郭页。遵照keepAlive的天性,此时会重返到 '/home' 的缓存页面,即会再次回到首页的卡萨布兰卡页,很分明那不适合业务供给。接下来,大家在search.vue组件内,增添多个零件内的导航守卫:

beforeRouteLeave(to, from, next){
    if(to.path == "/home"){
        to.meta.keepAlive = false;
    }
    next()
}

那样一来,在'/search'页面点击新扩展的都会跳转到'/home'页在此以前,导航守卫动态的将路由'/home'的keepAlive属性关闭,以此达到更新'/home'页DOM的目标。接着我们在home.vue组件上校keep阿里ve属性设为true就可以。

beforeRouteLeave(to,from,next){
    if(!this.$route.meta.keepAlive){
        this.RECORD_POSITION_Y(this.dist);
        this.$route.meta.keepAlive = true;
    }
    next();
}

keepAlive缓存的路由组件,除了能采纳上述所说的导航守卫来兑现创新组件,也得以利用keep-alive 组件非常的五个生命周期钩子:activated与deactivated。想精晓这两货的职业体制的,能够到这里看看。

未完待续 ...

正文基于 Vue2.0

{ 
name: 'index', 
path: '/index', 
title: '主页', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主页', 
keepAlive: true 
} 
} 

webapp尺寸实施方案

但凡涉及移动端,都只可以思量适配的标题。可是webapp本正是为化解跨平台跨终端而诞生,所以大家不可能为同贰个选择去支付三个适配版本。相信广大人曾在做自适应网页的时候,没少用过像bootstrap那样含有网格系统的框架,或是利用css的媒体询问。可是这么做未免太过辛勤。今日要介绍的是webapp尺寸的rem建设方案。

(function(doc, win) {
    let docm = doc.documentElement,
        //orientationchange为移动终端横屏事件
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
        handleResize = function() {
            let clientWidth = docm.clientWidth;
            //假设以iphone6(375x667)为设计稿,则此时为 1rem = 10px;
            docm.style.fontSize = clientWidth / 37.5   'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, handleResize, false);
    doc.addEventListener('DOMContentLoaded', handleResize, false);
})(document, window);

关于rem的介绍,互连网的资料相当多,能够活动摆渡或哭够~~

keep-alive 简介

keep-alive 是 Vue 内置的二个组件,能够使被含有的零件保留状态,或幸免重复渲染。
用法也一点也不细略:

<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>
export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

前面一个框架的选拔

在web移动端接纳神速崛起的明天,webapp,hybird app挤压古板原生app的取向尤其明朗,产品的快速翻新迭代、跨平台适配,催生了更上一层楼多琳琅满指标前端框架。为了应对精彩纷呈的制品供给,适应高速便捷的付出职业,大家也非得跟上步履,所以理解一门竟是多门前端框架显得特别重大。

vue作为一款渐进式的MVVM前端框架,在营造高复用性组件方面有所比极大的优势。其.vue单文件结构与数量驱动视图的研究,为开荒复杂的单页应用程序提供强有力支撑。

使用 include/exclude

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
    <router-view>
        <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
    </router-view>
</keep-alive>

exclude 例子类似。

瑕疵:供给精晓组件的 name,项目复杂的时候不是很好的取舍

那般设置了后来,主页的气象就能够保留,重临键重回到主页时页面不会刷新诉求数据了。

接触vue一年了,由于早前都以碎片化的求学与练习,缺乏浓烈的理解与计算,所以以为收效甚微。近来应用闲暇时光撸了贰个根据vue全家桶的天气应用webapp并做一些类型总计,以加强盛团结所学,加深对vue的接头。

【加盐】使用 router.meta 拓展

假如这里有 3 个路由: A、B、C。

  • 需求:

    • 暗许展现 A
    • B 跳到 A,A 不刷新
    • C 跳到 A,A 刷新
  • 达成形式

    • 在 A 路由中间安装 meta 属性:

{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 必要被缓存
}
}
```

  • 在 B 组件里面安装 beforeRouteLeave

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

  • 在 C 组件里面安装 beforeRouteLeave

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

如此便能兑现 B 回到 A,A 不刷新;而 C 回到 A 则刷新。

如上那篇消除vue单页使用keep-alive页面重临不刷新的难点就是小编分享给大家的全体内容了,希望能给我们一个参照,也盼望大家多多指教脚本之家。

参考

  • issues#811
  • vue#keep-alive
  • vue2.0 keep-alive最棒实行

—— 2017/04/06 By Live, haze currently.

<router-view></router-view> 

增加 router.meta 属性

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: 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>

优点:无需例举出须要被缓存组件名称

从详细情形页重临主页时把主页的keepAlive值设置为true(要做个判定,判定是否回到到主页的)

总结

路由大法不错,不须求关心哪个页面跳转过来的,只要 router.go(-1) 就会回来,不须要十分参数。

只是在非单页应用的时候,keep-alive 并无法有效的缓存了= =

率先在App.vue页面上有上面一段代码,大家都清楚那是页面渲染的地点

props

  • vue单文件组件构建vue项目的若干技巧或建议上海时时乐走势图官网。include - 字符串或正则表达,只有相配的零件会被缓存
  • exclude - 字符串或正则表达式,任何相称的机件都不会被缓存
// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存! -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存! -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

应用vue单页开垦品种时遭受四个很恶心的主题材料:在列表页点击一条数据步入详细情况页,按重返键重临列表页时页面刷新了,顾客体验拾壹分数差啊!!!查阅了须臾间有关难题,使用<keep-alive>消除那些标题,上面是本身的行使体验。

问题

一经只想 router-view 里面有个别组件被缓存,怎么做?

  • 使用 include/exclude
  • 增加 router.meta 属性

把这段代码改成如下:

遇见 vue-router

vue单文件组件构建vue项目的若干技巧或建议上海时时乐走势图官网。太湖雨好大,借把伞躲躲雨...
router-view 也是二个组件,假若直白被包在 keep-alive 里面,全体路径匹配到的视图组件都会被缓存:

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存! -->
    </router-view>
</keep-alive>

而是产品汪总是要改供给,拦都拦不住...

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值,false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};
<keep-alive> 
<router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view> 

vue单文件组件构建vue项目的若干技巧或建议上海时时乐走势图官网。接下来就是给大家路由安装keepAlive属性值,比方自个儿是给主页(列表页)的路由设置了keepAlive属性为true。

只顾难点:

<keep-alive>是Vue的放到组件,能在组件切换进程上校状态保留在内部存款和储蓄器中,幸免再一次渲染DOM。

beforeRouterLeave必需写在有布署路由的页面上才使得的,最开始笔者想写在App.vue页面上,发掘平昔就不执行的!

只是有标题啊!!!从主页跳到别的页面,再回来主页都不会刷新页面!那并非自身想要的,小编一旦从实际情况页再次回到列表页时不刷新页面,其余情状下是亟需刷新的,那么本身就需求定制化管理了。大约思路就是从主页跳转到别的页面时把主页的keepAlive值设置为false,从实际情况页重临主页时把主页的keep阿里ve值设置为true就好了,代码如下:

您或许感兴趣的文章:

  • vue第22中学的keep-alive使用总括及注意事项
  • vue使用keep-alive完成数据缓存不刷新
  • Vue keep-alive实行总括(推荐)
  • 深入通晓vue-router之keep-alive
  • 浅析Vue项目中动用keep-Alive步骤

此处运用了beforeRouterLeave(to,from,next){},它是methods平级的,具体使用方法能够查看一下。

主页跳转到其余页面时把主页的keepAlive值设置为false

我们能收看这段代码做的逻辑决断,当路由的meta属性的keepAlive属性值为true时页面包车型客车情景保存,其余意况下不保留情况。

本文由上海时时乐走势图发布于web前端,转载请注明出处:vue单文件组件构建vue项目的若干技巧或建议上海

您可能还会对下面的文章感兴趣: