巧妙处理vue-router不同路由相同组件钩子函数不执行问题

问题描述

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。那么想每次渲染相同组件时候都触发钩子函数要怎么做？

解决思路

1.使用watch监控路由或者使用路由守卫（不推荐，太麻烦）

响应路由参数的变化

2.给router-view添加添加一个唯一key值(推荐)

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

那么每次切换路由时，即便是相同的组件，钩子函数也会再次执行！！！

参考文章：https://juejin.cn/post/6844903476661583880#heading-16