{"id":635,"title":"vue-router\u7f13\u5b58\u8def\u7531\u7ec4\u4ef6\u53ca\u7ec4\u4ef6\u6fc0\u6d3b\u5931\u6d3b-tab\u5207\u6362\u65f6\u8f93\u5165\u7684\u6570\u636e\u4e0d\u6d88\u5931\u4f46\u5b9a\u65f6\u5668\u53ef\u4ee5\u505c\u4e0b","good":0,"bad":0,"hit":675,"created_at":"2024-01-28 08:39:07","content":"
\u89e3\u51b3tab\u5207\u6362\u65f6\u7ec4\u4ef6\u4e2d\u8f93\u5165\u7684\u5185\u5bb9\u6d88\u5931<\/p>
\u4f5c\u7528\uff1a\u8ba9\u4e0d\u5c55\u793a\u7684\u8def\u7531\u7ec4\u4ef6\u4fdd\u6301\u6302\u8f7d\u4e0d\u9500\u6bc1<\/p>
<\/p>
<\/p>
<template><\/p>
<div><!--\u8fd9\u4e2adiv\u4e0d\u80fd\u5c11\uff0c\u4e0d\u7136\u7f16\u8bd1\u4f1a\u5361\u4f4f--><\/p>
<h2>\u6211\u662fHome\u7684\u5185\u5bb9<\/h2><\/p>
<div><\/p>
<ul class="nav nav-tabs"><\/p>
<li><\/p>
<router-link class="list-group-item" active-class="active" to="\/home\/news">News<\/router-link><\/p>
<\/li><\/p>
<li><\/p>
<router-link class="list-group-item" active-class="active" to="\/home\/message">Message<\/router-link><\/p>
<\/li><\/p>
<\/ul><\/p>
<!--table\u5207\u6362\u65f6keey-alive\u6807\u7b7e\u4e2d\u88abinlucde\u6307\u5b9a\u7684\u7ec4\u4ef6\u8f93\u5165\u7684\u6570\u636e\u5207\u6362\u65f6\u4e0d\u4f1a\u6d88\u5931--><\/span><\/p> <!--\u5982\u679c\u4e0d\u6307\u5b9ainclude\u5219\u6240\u6709\u7684\u8f93\u5165\u90fd\u7f13\u5b58\uff0c\u8fd9\u91cc\u7684include\u662f\u7ec4\u4ef6\u540d--><\/span><\/p> <!--\u5982\u679c\u8981\u6307\u5b9a\u591a\u4e2a\uff1a<keep-alive :include="['News','aaa']"><\/keep-alive>--><\/span><\/p> <keep-alive include="News"><\/span><\/p> <router-view><\/router-view><\/span><\/p> <\/keep-alive><\/span><\/p> <\/div><\/p> <\/div><\/p> <\/template><\/p> \u4e0b\u9762\u53c8\u4f1a\u51fa\u73b0\u4e00\u4e2a\u65b0\u7684\u95ee\u9898\uff1a\u5047\u5982news\u7ec4\u4ef6\u4e2d\u7684input\u9700\u8981\u7f13\u5b58\uff0c\u4f46\u5b9a\u65f6\u5668\u5207\u6362\u65f6\u8981\u505c\u6b62\u63d0\u9ad8\u6027\u80fd\uff0c\u8fd9\u5c31\u51fa\u73b0\u77db\u76fe\u4e86<\/p> \u89e3\u51b3\u65b9\u6cd5\uff1a<\/p> <template><\/p> <ul><\/p> <li :style="{opacity}">www.hu-rong.com<\/li><\/p> <li>news001 <input type="text"><\/li><\/p> <li>news002 <input type="text"><\/li><\/p> <li>news003 <input type="text"><\/li><\/p> <\/ul><\/p> <\/template><\/p> <\/p> <script><\/p> export default {<\/p> name:'News',<\/p> data(){<\/p> return {<\/p> opacity:1<\/p> }<\/p> },<\/p> beforeDestroy(){<\/p> console.log('News\u7ec4\u4ef6\u5373\u5c06\u88ab\u9500\u6bc1')<\/p> },<\/p> activated(){<\/span><\/p> console.log('News\u7ec4\u4ef6\u88ab\u6fc0\u6d3b\u4e86')<\/p> this.timer=setInterval(()=>{<\/p> console.log('\u5b9a\u65f6\u5668\u8fd8\u6d3b\u7740')<\/p> this.opacity-=0.01<\/p> if(this.opacity<=0)this.opacity=1<\/p> },16)<\/p> },<\/p> deactivated(){<\/span><\/p> console.log('News\u7ec4\u4ef6\u5931\u6d3b\u4e86')<\/p> clearInterval(this.timer)<\/p> }<\/p> }<\/p> <\/script><\/p> <\/p> <style><\/p> <\/style><\/p>
<\/p><\/p>
<\/p>
<\/p>
<\/p>"}