使用vue-router、keep-alive點擊當前組件跳轉(zhuǎn)，會觸發(fā)該當前組件的created以及mounted鉤子函數(shù)

問題描述

目前在做一個小demo，使用了parcel+vue+vue-router+axios+muse-ui，實踐中需要使用keep-alive保證組件不會被刷新，當點擊該問題組件跳轉(zhuǎn)其詳情組件的時候，居然觸發(fā)了該組件的鉤子函數(shù)，使得該組件的ajax請求又發(fā)了一遍
請把代碼文本粘貼到下方（請勿用圖片代替代碼）

• router：

const Index = () =>
    import ('../components/Index.vue')
const Daily = () =>
    import ('../components/Daily.vue')
const Gifts = () =>
    import ('../components/Gifts.vue')
const Cats = () =>
    import ('../components/Cats.vue')
const DailyDetail = () =>
    import ('../components/DailyDetail.vue')
export default new Router({
    routes: [{
        path: '/',
        component: App,
        children: [{
            path: '',
            component: Index,
            redirect: '/Daily', //設置默認指向的路徑
            children: [{
                    path: 'Daily',
                    name: "Daily",
                    component: Daily,
                    meta: {
                        keepAlive: true
                    }
                }, {
                    path: 'Gifts',
                    name: "Gifts",
                    component: Gifts,
                    meta: {
                        keepAlive: true
                    }
                },
                {
                    path: 'Cats',
                    name: "Cats",
                    component: Cats,
                    meta: {
                        keepAlive: true
                    }
                }
            ]
        }, {
            path: '/DailyDetail/:id',
            name: "DailyDetail",
            component: DailyDetail,
            meta: {
                keepAlive: false
            }
        }]
    }]
})

• App.vue

<template>
    <div id="app">
        <transition name="fade" mode="out-in">
            <!-- 緩存所有的頁面 -->
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </transition>
        <transition name="fade" mode="out-in">
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
    </div>
</template>

• 問題組件

<template>
    <div>
        <!-- <h1>我是日更主頁面</h1> -->
        <div class="contaniner_box">
            <ul>
                <li v-for="item in dailyCats" :key="item.id" @click="goDetailPath(item.id)">
                    <div class="box_detail">
                        <div class="bg_box">
                            <div class="bg_text">
                                <div class="text_type" v-if="item.id==1">
                                    <span>貓歷</span>
                                </div>
                                <div class="text_date">
                                    <div class="text_day">
                                        <span>{{item.imageDataDay}}</span>
                                    </div>
                                    <div class="text_time">
                                        <span class="time_top">{{item.imageDataMonth}}</span>
                                        <span class="time_bottom">{{item.imageDay}}</span>
                                    </div>
                                </div>
                                <div class="text_title nameEllipsis" v-if="item.id!=1">
                                    {{item.imageTitle}}
                                </div>
                            </div>
                            <img :src="item.imageUrl" alt="">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Daily",
        data() {
            return {
                dailyCats: []
            }
        },
        created() {
            this.getData();
            console.log("created")
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll)
        },
        activated() {
            console.log("activated")
        },
        deactivated() {
            console.log("deactivated")
        },
        methods: {
            getData() {
                var _self = this; //確保下面使用ajax時候this指向正確
                this.$http.get('https://www.easy-mock.com/mock/5b19f530b97c8172c435c38b/dailyCats/mock').then(function(r) {
                    _self.dailyCats = r.data.data.data;
                }).catch(function(e) {})
            },
            goDetailPath(this_id) {
                this.$router.push({
                    name: 'DailyDetail',
                    params: {
                        id: this_id
                    }
                })
            },
            handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                console.log(scrollTop)
            },
        },
    }
</script>

• 詳情組件

<template>
    <div class="detail_body">
        <div class="nav_header">
            <mu-appbar color="primary">
                <mu-button icon slot="left" @click="$router.go(-1)">
                    <mu-icon value="keyboard_arrow_left"></mu-icon>
                </mu-button>
                一日貓
            </mu-appbar>
        </div>
        <div class="container_body">
            
        </div>
    </div>
</template>

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

我期望的結(jié)果是需要實現(xiàn)keep-alive的效果，并且不能讓再觸發(fā)鉤子函數(shù)。