{"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>

    \"image.png\"\/<\/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>

<\/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>

\"image.png\"\/<\/p>

<\/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>"}