路由跳转demo元素没有销毁的问题(使用vue路由拦截)

应用场景：

跳转路由出现runtime-dom.esm-bundler.js:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading '×××')情况,当vue的退出监听的生命周期函数不管用的时候可以使用vue-router的一个路由拦截，进行一个操作

你们可能遇到的问题：路由跳转的时候当前页面有元素没有销毁的时候，跳转其他页面路由时候会发生报错误，打开控制台一看基本都是找不到属性这类型的报错，这就是上一个页面的元素没有销毁掉，所以带到其他页面那边去，导致一个问题。我在使用elementui时使用抽屉时遇到了这个问题，一开始第一影响感觉这个问题很好解决，不就没有销毁嘛，咋使用vue3的一个生命周期函数

onBeforeUnmount()

离开时候把这个抽屉关闭一下，数据清空一下即可

但是我发现时候远远没这么简单，我使用onBeforeUnmount但是依然报错误，然后我用onUnmounted，发现依然没有销毁到函数。

这个时候vue-router的方法就起作用了，先在当前页面引入onBeforeRouteLeave 

import { onBeforeRouteLeave } from 'vue-router';

然后

 onBeforeRouteLeave((to, from, next) => {
    console.log('准备离开这个路由');
    isDestroyDrawer.value = true; //这个是我关闭、销毁元素,抽屉的一个操作
    next(); //跳转，如果不写next() 就不会跳转路由
  });

完美解决跳转路由页面没有销毁的问题