29_编程式路由导航

29_编程式路由导航

< router-link >实际上是< a >链接 这个可以用来处理 < button >跳转

代码演示

Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">

                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">repalce查看</button>
                <button @click="back">后退</button>
                <button @click="forward">前进</button>
            </li>
            <hr />
            <router-view></router-view>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Message",
        data() {
            return {
                messageList: [
                    { id: "001", title: "消息001" },
                    { id: "002", title: "消息002" },
                    { id: "003", title: "消息003" },
                ],
            };
        },
        methods: {
            pushShow(m) {
                this.$router.push({
                    path: "/home/message/detail",
                    query: {
                        id: m.id,
                        title: m.title,
                    },
                });
            },
            replaceShow(m) {
                this.$router.replace({
                    path: "/home/message/detail",
                    query: {
                        id: m.id,
                        title: m.title,
                    },
                });
            },
            back() {
                this.$router.back()
            },
            forward() {
                this.$router.forward()
            },
        },
    };
</script>

缓存路由组件

代码演示

News.vue

<template>
    <div>
        这里是news内容
        <ul>
            <li>news001 <input type="text"></li>
            <li>news002 <input type="text"></li>
            <li>news003 <input type="text"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'News'
    }
</script>

Home.vue

<template>
    <div>
        <h2>我是Home内容</h2>
        <ul>
            <li>
                <router-link to="/home/news">News</router-link>
            </li>
            <li>
                <router-link to="/home/message">Message</router-link>
            </li>
        </ul>
        <!-- 缓存路由组件 组件名-->
        <keep-alive include="News">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: "Home",
    };
</script>

# 缓存多个组件 用数组
<keep-alive :include="['News','Message']">
</keep-alive>

两个新的生命周期钩子

代码演示

解释 用mounted() 和 beforeDestory() 切换组件的时候定时器还在运行

News.vue

<template>
    <div>
        这里是news内容
        <ul>
            <li :style="{opacity}">你好啊</li>
            <li>news001 <input type="text"></li>
            <li>news002 <input type="text"></li>
            <li>news003 <input type="text"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'News',
        data() {
            return {
                opacity:1
            }
        },
        activated(){
            console.log("News组件被激活了");
            this.timer =setInterval(()=>{
                this.opacity -=0.01
                if( this.opacity <=0 ){
                    this.opacity =1
                }
            },16)
        },
        deactivated(){
            console.log("News组件失活了");
            clearInterval(this.timer)
        }
    }
</script>