Óû§Ãû£º¶û»±seqcjlzfk
ǰÑÔ
ϰàǰ£¬20·ÖÖÓ£¬·¢Ò»Æª¡£¡£¡£
¼òµ¥½éÉÜ£¬Ê¹ÓÃkeep-aÏÈÃÇ¿öÀÏÈÝÈ´Ôð×îÀú¶ÓliveµÄʱºò£¬·µ»ØÇ°Ò»Ò³£¬Ã»Óб£³Ö¹ö¶¯ÌõλÖá£
ÊÂʵÎÊ´ðÉÏ£¬¾ÍË㲻ʹÓÃkeepÊܰ¢Ö³±¸-alive£¬Î»ÖÃҲûÓб»¼Ç¼¡£
µ«ÊÇ£¬ÔÚ²»ÊÊÓÃkeep-aliveµÄʱºò£¬Ò³ÃæÄÚÈÝ»áË¢ÔöУ¬ËùÒÔ¾ÍËæËûÈ¥ÁË¡×î²½ÏãǰÍíÓÖÐøÂòÍÁÖ¯¡¾ÍÊÇÕâôÈÎÐÔ¡¡
˼·
¹ÙÏß¹ý´¦Î¯¹¹·½ÓÐÍÆ¼öÒ»¸öscrollBeh**ior£¬Á´½Ó£¬µ«ÊÇÉÏÃæ±ê×¢£¬Ö»ÔÚhistory.pushStateµÄä¯ÀÀÆ÷ÉúЧ£¬²»ÖªµÀÊDz»ÊÇÖ»ÄÜ¿ªÆôhistory.pushState²Å¿ÉÒÔʹÓÃÌú¿ìÃֳܸäÔ¤×ö¶ǰ£¬¿´ÁËÏÂʵÏÖ£¬Í¦²»ÓÑѪ¾ÃÔËȱÑÛ»°Âí˹µÍºÃµÄ£¬»¹ÊÇ×Ô¼º¸ã¶ÊºÏÕÂÀÍҩͬȷһ¸ö°É¡£¡£¡£
ʵÏÖ˼·ÊÇÕâÑùµÄ£¬Ê×ÏȸøÂ·ÓÉÔö¼ÓÒ»¸ö¶ÔÏómeta£º
meta:{
keepAlive:true,scrollTop:0,}keepAliveÊÇ·ñÐèÒª±£³ÖÒ³Ãæ£¬scrollTop¼ÇÂ¼Ò³ÃæµÄ¹ö¶¯Î»Öá£
È»ºóÔÚapp.vueÔö¼ÓÈçÏÂÈë¿Ú£º
<keep-alive><router-viewv-if="$route.metaÍò×ÓÁÙËÀ·ÀÕ¼Ãû¼¦.keepAlive"></router-view></keep-alive><router-viewv-if="!$route.meta.keepAlive"></router-view>ÕâÑù¾ÍÆôÓÃkeep-aliveÁË¡£
È»ºóÔÚÈ«¾Ömain.tsÔö¼ÓÒ»¸öÈ«¾Ö·ÓÉ¿ØÖÆ£º
router.beforeEach((to:Route,from:Route,next:()=>void)=>{if(from.meta.keepAlive){const$contͶ»·»¬¼Á½ºÆÚɱÐÐÇâËÆent=document.querySelector('#content');constscrollTop=$content?$content.scrollTop:0;from.meta.scrollTop=scrollTop;}next();});ºÜ¼òµ¥£¬À뿪µÄʱºòÅжϵ±Ç°Ò³ÊÇ·ñÐèÒª±£³ÖÒ³Ãæ£¬Èç¹ûÐèÒª£¬¼ÇÂ¼Ò³ÃæÖ÷ÈÝÆ÷contentµÄ¹ö¶¯Î»Öã¬Ð´Èë·ÓÉ¡£
È»ºó£¬Ã¿´Î½øÈë±£³ÖºÃµÄÒ³Ãæ£¬¶ÁÈ¡¹ö¶¯ÌõλÖÃscrollTop£¬ÐÞ¸ÄÖ÷±¨Ö½Å©ÒµÈÝÆ÷µÄscrollTop£¬¾Í¸ã¶¨ÁË£º
publicactivated(){constscrollTop=this.$route.meta.scrollTop;const$content=document.querySelector('#content');if(scrollTop&&$content){$content.scrollTop=scrollTop;}}¿´ÆðÀ´ºÜ¼òµ¥Å¶¡£
ÒÅÁôÎÊÌâ
1¡¢ÊDz»ÊÇÿ¸öÒ³Ãæ¶¼¿ÉÒԼǼ¹ö¶¯ÌõλÖÃÄØ£¿
Æäʵ²»Êǵģ¬ÓеÄÒ³Ãæ£¬**ÓÐjs½»»¥£¬±ÈÈçtab½»»¥£¬²»Í¬µÄtab£¬Ò³Ãæ¿É¹ö¶¯µÄ¸ß¶È²»Ò»Öµô£¬Èç¹û²»±£³ÖÒ³Ãæ×´Ì¬¶øÍ³Ò»¼Ç¼¹ö¶¯Î»Öã¬ÓпÉÄܵ¼Ö¹ö¶¯ÌõµÄλÖôíλ¡£
2¡¢Äܲ»ÄܰÑactivatedÕâÒ»²½ÇìÍâίÕë¶Î̬°²Ìø³¤Ð´µ½È«¾ÖµÄmain.ts»òÕßsÎñ²É¶Ë½ÅÁËÇøæÃ³Ö³¡Æ¬ËùtateÈ¥ÄØ£¿
ÓÐÏë¹ý¸ùÑô¸ß½¨ÊöÆóÕâµã£¬µ«ÊÇĿǰÀ´Ëµ£¬×ªÈ¥Ëï¼¼´¦Ã»ÕÒµ½ÊµÏֵķ½·¨¡£
Ê×ÏÈ£¬Èç¹ûͨ¹ýrouterÀ´¿ØÖÆ£¬×ö²»µ½£¬È«¾Ö·ÓÉ¿ØÖÆÖ»ÄÜÔÚÒ³Ãæ¼ÓÔØÇ°**£¬È¡²»µ½ÔØÈëÒ³µÄÔªËØ¡£
Èç¹ûдÔÚÒ»¿¹¾¸öͨÓõÄÈ«¾Öº¯ÊýÈ¥¿ØÖÆ£¬±ÈÈ綨ÒåÒ»¸östate£¬µ³Ãæ¼ÓÔØÍêµÄʱºòÉèÖã¬ÄÇÐèÒª¶¨ÒåÒ»¸ömixinsÀ´´¦Àí£¬µ«ÊǶÔÕâ¸ömixins²»Ì«ÊìϤ£¬ÔÝʱ»**»ÖªµÀ¸ÃÔõô×ö£¬¿ÉÄÜÓÐʱ¼äÕÒ¸ö·½·¨¸ã¶¨Ëü¡£
ÒÔÉϾÍÊDZ¾ÎĵÄÈ«²¿ÄÚÈÝ£¬Ï£Íû¶Ô´ó¼ÒµÄѧϰÓÐËù°ïÖú£¬Ò²Ï£Íû´ó¼Ò¶à¶àÖ§³Ö½Å±¾Ö®¼Ò¡£
Äú¿ÉÄܸÐÐËȤµÄÎÄÕÂ:vue½øÈëÒ³ÃæÊ±¹ö¶¯ÌõʼÖÕÔڵײ¿´úÂëʵÀývue**ij¸ödiv´¹Ö±¹ö¶¯ÌõÏÂÀµ½µ×²¿µÄ·½·¨vueÖйö¶¯ÌõʼÖÕ**Ôڵײ¿µÄ·½·¨vueÒÆ¶¯¶Ë**¹ö¶¯Ìõ¸ß¶ÈµÄʵÏÖ·½·¨vue´¿js**¹ö¶¯Ìõµ½µ×²¿µÄʵÀý½²½âvueʵÏÖ¶¯Ì¬Ìí¼Ó**¹ö¶¯Ìõ×Ô¶¯¹ö¶¯µ½µ×²¿µÄʾÀý´úÂëvueÿ´ÎäÖȾÍêÒ³ÃæºódivµÄ¹ö¶¯Ìõ±£³ÖÔÚ×îµ×²¿µÄ·½·¨vue.js-div¹ö¶¯ÌõÒþ²Øµ«Óйö¶¯Ð§¹ûµÄʵÏÖ·½·¨»ùÓÚvue.js2.xµÄÐéÄâ¹ö¶¯ÌõµÄʾÀý´úÂëvueÖÐʹÓÃvue-routerÇл»Ò³ÃæÊ±¹ö¶¯Ìõ×Ô¶¯¹ö¶¯µ½¶¥²¿µÄ·½·¨