路由守卫 beforeRouteEnter 的使用
https://www.bilibili.com/video/BV1Nb4y1r7Tx?p=71&vd_source=6292df769fba3b00eb2ff1859b99d79e
https://www.bilibili.com/video/BV1V84y1U77n/?p=181&vd_source=6292df769fba3b00eb2ff1859b99d79e
https://www.bilibili.com/video/BV1s24y117mu/?p=99&vd_source=6292df769fba3b00eb2ff1859b99d79e
===============================
就喜欢在created的方法中去做一些内容，直到今天碰到一个问题后我发现，created并不是完成的，有些时候它并不会被执行，这不由得让我想知道几个内容的区别并且，想看看它们的执行顺序如何
beforeRouteEnter(to, from, next) {
console.log("next beforeRouteEnter");
next((vm) => {
vm.fromName = from.name; //获取跳转前路由的name并赋值给this.fromName
console.log(vm.zx, "nexted beforeRouteEnter");
});
},
created() {
console.log(this.zx, "created");
},
mounted() {
console.log(this.zx, "mounted");
},
在同一个项目中beforeRouteEnter出现了两种执行顺序，一种是从菜单点进列表页，执行顺序是
beforeRouteEnter---->created---->mounted----->beforeRouterEnter的next()
另一种是点击列表页的详情按钮进入详情页后通过 this.$router.back(-1) 方法返回列表页，执行顺序是
beforeRouteEnter---->created---->beforeRouterEnter的next()----->mounted
顺序是知道了，但是对于这几个有什么区别我还是有些不太清楚。。光说顺序，这个也没什么用，然后看了下vue的教学文档，有人对此做出了解释
1、beforeRouteEnter 和created 和mounted触发的时机
created的触发
只有组件在创建时，才会触发created。（那预示着如果使用created这个内容，产生了tab然后没关闭，另一个页面带着不同的参数又跳到这个页面，并不会触发created）
beforeRouteEnter的触发
每次进入路由时，都会触发beforeRouteEnter（意味着只要路由变化一定会）。
所以，当一个页面使用了keep-alive进行了缓存时，离开这个页面后再次进入时，不会再触发created，但是会触发beforeRouteEnter。
所以，beforeRouteEnter一般会配合keep-alive使用。
而且在beforeRouterEnter的参数中，可以获取到前一个路由的参数，如果有这个需求也可以使用beforeRouteEnter
mounted函数的触发
mounted函数的执行时机是在组件挂载后，即虚拟DOM被渲染并插入到实际DOM中之后。这意味着，在mounted函数中我们可以安全地操作DOM，比如通过document.getElementById等方法获取实际DOM节点，并对其进行修改。然而，在mounted函数之前，由于虚拟DOM尚未被渲染为实际DOM，因此操作实际DOM是不可靠的，不可靠是什么意思，就是你可能找dom的时候被告知没有此dom内容
需要注意的是，mounted函数只会在组件第一次渲染时执行一次。如果组件所依赖的属性发生变化，导致重新渲染组件，mounted函数不会再次执行。如果我们需要在组件重新渲染后执行某些操作，比如更新操作或动画效果等，可以使用updated函数或watch监听功能来完成。
一般做一些dom渲染后的一些初始化的操作内容，但是啊一定要注意mounted函数只会在组件第一次渲染时执行一次，如果组件发生重新渲染，mounted函数不会再次执行，
总结
其实说了半天还是vue生命周期的事情无非就是
create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。只不过其中的细节还是要知道和清楚，不然就很容易在用的时候遇到问题
拓展内容
还有一个小点就是我刚刚说到的那个方法keep-live，keep-live就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。。
那么为啥点击别的页面就会导致销毁呢？这个问题就有点愚蠢了，，每个组件都有自己的生命周期，点击别的路由的时候上一个路由就会触发这个路由页面对应组件上的destroy钩子方法，然后这个路由页面对应的组件就被销毁了，组件销毁了，组件上的挂载的数据也就啥也没有了。，所以其实点击不同的页面那就是一个路由跳转的过程，而这个过程就是一直在走生命周期的一个过程。。
脑洞大开又想到了http协议的请求头里面也有一个keep-alive，保持http通话，这样：Connection: keep-alive 功能虽然不一样，但是思想上是一样的即为~保持状态活跃
原文链接：https://blog.csdn.net/qq_42584411/article/details/134464775
===============================
beforeRouteEnter 函数内部不能使用 this，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate，可以将要处理的对象放在 next 中处理
===============================
beforeRouteEnter
比较常见的一种应用场景就是，当前页面是数据列表页并且开启了缓存，跳转到其他子页面再跳转回来时，需要根据不同的页面或参数来判断是否重新加载列表页的数据。有一种方法就是给列表页的路由配置meta字段——路由元，设置一个refresh属性，并在activated钩子里做对应处理。
{
path: "/bookList",
name: "bookList",
component: resolve => require(["@/views/book/List"], resolve),
navbarOption: "书籍列表",
meta: {
keepAlive: true, // 组件缓存
refresh: false // activated钩子触发时是否重新加载数据
}
},
代码中用到了sessionStorage、localStorage，但有时候走了一圈流程后需要重置数据，就可以在beforeRouteEnter或beforeRouteLeave处理这些缓存。
有个项目用到了高德地图AMap，AMap插件在调用api时，会自动抓取当前页面路径作为参数appname的值，但有时候抓取的却是上一个页面的路径，而如果上一个页面的路径太长的话，这请求就直接413了。实际上，地图页面路径其实并不长，所以这里在渲染地图之前，刷新页面，这样AMap抓取的页面路径就是当前页面路径了。
注意，这里的needReload需要设置为js全局变量，如果放在vue的data里的话，会造成页面一直刷新，死循环。
beforeRouteLeave
离开本路由前需要重置样式。
代码中用到了sessionStorage、localStorage，但有时候走了一圈流程后需要重置数据，就可以在beforeRouteEnter或beforeRouteLeave处理这些缓存。
离开本路由前显示确认框：确认离开本页面。
从本页面返回时，不是回到上一个页面，而是需要指定别的页面，那么就要在beforeRouteLeave方法里处理，最后一定要加上next();
原文链接：https://blog.csdn.net/qq_32886245/article/details/113603210
===============================
Vue导航守卫以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。
Test1：
<template>
<div>
test1
<el-button @click="test2">跳转</el-button>
</div>
</template>
<script>
export default {
name: "Test1",
methods: {
test2() {
this.$router.push({name: "test2", query:{type: false}})
}
},
beforeRouteEnter(to, from, next) {
console.log("****************Test1****Enter**************");
console.log('to', to);
console.log('from', from);
console.log('next', next);
next(vm => {
//因为当钩子执行前，组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
console.log(vm);//当前组件的实例
});
},
beforeRouteUpdate(to, from, next) {
//在当前路由改变，但是该组件被复用时调用
//对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
// 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log("****************Test1*******Update***********");
console.log(this, 'Update'); //当前组件实例
console.log('to', to);
console.log('from', from);
console.log('next', next);
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log("****************Test1****Leave**************");
console.log(this, 'Leave'); //当前组件实例
console.log('to', to);
console.log('from', from);
console.log('next', next);
next();
}
}
</script>
<style scoped>
</style>
Test2:
<template>
<div>
test2
</div>
</template>
<script>
export default {
name: "Test2",
beforeRouteEnter(to, from, next) {
console.log("****************Test2*********Enter*********");
console.log(this, 'beforeRouteEnter'); // undefined
console.log('to', to);
console.log('from', from);
console.log('next', next);
next(vm => {
//因为当钩子执行前，组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
console.log(vm);//当前组件的实例
});
},
beforeRouteUpdate(to, from, next) {
//在当前路由改变，但是该组件被复用时调用
//对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
// 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log("****************Test2*********Update*********");
console.log(this, 'beforeRouteUpdate'); //当前组件实例
console.log('to', to);
console.log('from', from);
console.log('next', next);
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log("****************Test2*********Leave*********");
console.log(this, 'beforeRouteLeave'); //当前组件实例
console.log('to', to);
console.log('from', from);
console.log('next', next);
next();
}
}
</script>
<style scoped>
</style>
首先是第一次进入Test1
可以看出当作为首页进入的时候，beforeRouteEnter方法中
to显示的是当前路由，
from显示name为null，path是"/"
当离开Test1页面进入Test2页面时 将先调用Test1页面中的beforeRouteLeave方法，再调用Test2中的beforeRouteEnter方法
beforeRouteLeave中
to显示的就是去往的路由test2有参数传递
from显示的是正要离开的路由test1
beforeRouteEnter中
to里面显示的就是本页面test2并且有参数传递
from显示的是上一个页面test1
当离开Test2返回Test1页面时，先调用Test2页面中的beforeRouteLeave方法，再调用Test1中的beforeRouteEnter方法
beforeRouteLeave中
to显示的是要去的路由test1
from显示的是即将离开的路由test2并且有 参数传递
beforeRouteEnter中
to显示的是本页面test1
from中显示的是上一页面test2有参数传递
由此我们可以总结出
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
这是两个参数的本意 ，我们可以这么理解
当beforeRouteEnter方法时：to可以理解为当前页面，from为来自哪个页面，如果是首页则name为null，path为"/"
当beforeRouteLeave方法时：两个参数的意思可以跟官网意义相同
————————————————
原文链接：https://blog.csdn.net/qq_43196107/article/details/90235110
===============================
===============================
