vue3 监听路由,vue3.0路由监听
本文主要介绍了vue监控路由变化的几种方式的总结，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
监控路线变更的几种方法的总结。1.监控路线的来源。2.监控路由变化以获取新旧路由信息。3.监控路由变更触发方法。4.全局监控路由如何监控组件中路由参数的变化？方法1:监视$route。方法2:守护组件中的导航。
监听路由变化的几种方式小结
在vue页面开发中，我们经常需要根据路线的变化来实现一些操作，那么如何监控路线的变化呢？当然，它在VUE使用手表。请看代码。
一、监听路由从哪儿来到哪儿去
观察：{
$路线(至，自){
console . log(from . path)；//你来自哪里？
console . log(to . path)；//你要去哪里？
}
}
二、监听路由变化获取新老路由信息
观察：{
$route:{
处理程序(val，oldval){
console . log(val)；//新的路由信息
console . log(old val)；//旧的路由信息
},
//深度观察和监控
深：真的
}
}
三、监听路由变化触发方法
方法：{
getPath(){
console.log(1111)
}
},
观察：{
$route:getPath
}
四、全局监听路由
在app.vue的创建类型中添加以下代码，然后做出判断。
这个。$router.beforeEach((收件人、发件人、下一个)={
console.log(到)；
next()；
});
如何在组件中监听路由参数的变化？
当使用路由参数时，例如从/user/foo导航到/user/bar，原始组件实例将被重用。
因为两条路线呈现相同的组件，所以多路复用比销毁和重新创建更有效。但是，这也意味着组件的生命周期钩子不会被再次调用。
那么如果要监控组件中路由参数的变化，只能使用watch $route对象，或者使用beforeRouteUpdate的组件内守护。
方式一： 监听 $route
const User={
模板：“.”,
观察：{
$路线(至，自){
//响应路线更改.
}
}
}
方式二：通过组件内的导航守卫
BeforeRouteUpdate，(与created(){}生命周期函数的级别相同)
const User={
模板：“.”,
beforeRouteUpdate(收件人，发件人，下一个){
//对路由更改做出反应.
//不要忘记调用next()
}
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。