使用vue-router、keep-alive点击当前组件跳转，会触发该当前组件的created以及mounted钩子函数

Question

问题描述

目前在做一个小demo，使用了parcel+vue+vue-router+axios+muse-ui，实践中需要使用keep-alive保证组件不会被刷新，当点击该问题组件跳转其详情组件的时候，居然触发了该组件的钩子函数，使得该组件的ajax请求又发了一遍
请把代码文本粘贴到下方（请勿用图片代替代码）

• 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>

你期待的结果是什么？实际看到的错误信息又是什么？

我期望的结果是需要实现keep-alive的效果，并且不能让再触发钩子函数。

Answer 1

这里替换为

<transition name="fade" mode="out-in">
            <!-- 缓存所有的页面 -->
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>

再看看

Answer 2

大概看了一下 是你的v-if 值改变了 导致组件被移除、重新渲染了
你可以把v-if先注释掉试试

Answer 3

我在使用vue-router时也发现了这种问题，不仅会触发组件的created和mounted钩子而且会触发destroyed钩子，我个人觉得是和父组件存在重定向有关系，不知道题主现在有没有发现出现这种问题的原因，正常情况下组件一旦被keep-alive之后即使内部数据发生更新也不会触发created和mounted，所以有可能是因为路由的问题

Answer 4

题主解决了吗 我也遇到 这个问题了 每次 进入下个页面的时候都会去执行created mounted 把所有的数据初始化了一次 而且缓存的滚动条位置有问题 回来的位置 不是前一个位置

Answer 5

使用include属性

    <keep-alive :include="keepAliveArray">
        <router-view></router-view>
    </keep-alive>

Answer 6

这种方法，可以解决不触发create和mounted的问题，标签页之间切换的时候不会刷新，但是返回的时候会刷新

        <div v-if="$route.meta.keepAlive">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
        <div v-else>
          <router-view ></router-view> 
        </div>

Answer 7

app.vue 中就用 <router-view />
再搞一个home页面啥的，里面用到的地方

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

我是这样解决的，可以试试。

Answer 8

遇到了和题注一样的问题，我缓存了所有页面

      <keep-alive>
        <router-view/>
      </keep-alive>

但是在我使用push跳转页面后，还是会触发List组件的created钩子

this.$router.push(`/center/List`)

Answer 9

解决了，版本问题，使用include控制就不会有问题；
（ps：:以前我们老版本控制是通过v-if控制)