vue 中 watch 与导航守卫

最新推荐文章于 2024-06-03 15:47:35 发布
最新推荐文章于 2024-06-03 15:47:35 发布
阅读量362 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44827421/article/details/95979691
版权
博客指出在Vue中监听路由变化控制页面访问权限时，watch存在局限性，如无法监听从index到index的跳转。而导航守卫可解决此问题，能监听到该类跳转，成功拦截无权限用户。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们在监听路由变化的时候一般会选择使用watch, 但是,如果我们希望通过监听路由的变化来控制一些页面的访问权限,watch就不那么好用了.

为什么这么说呢?
假设我希望控制用户访问index主页的权限,当我监听到路由是去到index的,就要判断用户是否有权限,.
如果用户从index跳到index的话,此时watch就失效了,无法监听,因为他不认为路由发生了变化

此时我们可以使用导航守卫来实现这个监听,它可以监听到从index到index的跳转,仍然成功的拦截到没有权限的用户
(简单的总结,勿喷)

Vue入门【十一】-- 导航守卫与路由模式
qq_48802092的博客
10-04 1363
路由的两种模式及其区别？ hash模式：会在路由路径携带#，不会请求服务器，工作原理是hashchange事件,支持低版本浏览器 history模式：不会在路由路径携带#，会请求服务器，工作原理是go/back/ forward，是h5新增的api，不支持低版本浏览器。
vue的生命周期
y1234569q的博客
04-22 199
1.什么是生命周期函数 生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 ## 1.1 生命周期函数有哪些 创建阶段 - beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this - created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了 -..
Vue笔记第六天(设置cook、导航守卫、watch和filter的补充)
qq_43378800的博客
08-12 272
第六天 1.axios发post请求 axios .post( 网址,{传递给服务器的参数 }) .then(backData=>{}) 2.设置让axios发请求时默认带cookie 原因:axios 跨域默认不携带cookie 解决办法:axios.defaults.withCredentials = true; 3.导航守卫 ①.全局导航守卫–作用：可以在跳转到另一个路由之前，帮你做一...
怎么监听路由的改变的两种方式（watch，路由守卫）
weixin_56115652的博客
09-17 389
有时候在项目中要监听路由的变化，如路由传值等 。 warth（监听路由） warth监听路由的参数按常规的 。
使用watch监听导航切换来控制导航栏的有无
weixin_44632257的博客
07-27 319
1、新建底部导航页面，bottomBar.vue 2、在App.vue中引入底部导航，通过watch去监听路由跳转 <template> <div id="app"> <router-view></router-view> <bottom-bar v-if="show"></bottom-bar> </div> </template> <script> import bott
Vue Router中应对路由参数变动的策略（watch监听与导航守卫应用）
最新发布
akj_top1的博客
06-03 422
原有的组件实例会被重用以提高效率，因为这两个路径共享同一组件。此机制虽提升了性能，但也意味着组件的生命周期钩子将不再触发，需要另寻他径监控此类变化。以上方法确保了路由参数变化时，无论是通过监听还是守卫机制，都能有效地响应并执行相应的逻辑处理。为了确保组件根据路由参数变化重新渲染，可为。在应用中利用路由参数，例如从路径。
vue面试题-路由守卫 / 导航守卫
02-03
在面试中，面试官可能会提出关于“路由守卫”或“导航守卫”的问题，这是Vue Router的一个重要特性，用来控制用户的导航行为，确保只有授权的用户才能访问特定的页面。 1. **路由守卫 / 导航守卫**： - 路由守卫...
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
12-09
#在切换路由时，组件会被复用，不过，这也意味着组件的生命周期钩子不会再被...使用 2.2 中引入的 beforeRouteUpdate 导航守卫： const User = { template: '...', beforeRouteUpdate (to, from, next) { // react
vue使用watch 观察路由变化，重新获取内容
08-31
在某些情况下，使用计算属性(computed properties)或者Vue Router的导航守卫(guards)来管理数据获取和页面更新，可能会是更优的选择。 在Vue 3中，还引入了Composition API，它提供了更灵活的方式来处理响应式数据...
​watch深度监听失效解决方案以及原因​
qq_39974331的博客
12-07 7906
总结： watch深度监听失效一般是由于变化的属性未初始化，导致watch进行深度监听初始化时，没有录入进去，从而导致监听失效。可以使用this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)这样可以必然触发watch的监听。 案发情况： 首先，watch监听一般都这么写： watch: { obj(newVal, oldVal) { // todo console.log(newVal, oldVal) } } 复制代码 但是w...
必背的小技巧让你轻松过关
links_577073699的博客
04-24 1333
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、生命周期1.1 什么是生命周期函数1.2 生命周期函数有哪些1.3 项目开发中 在生命周期里都做过什么功能1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?二、vuex 的理解三、 vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解 一、生命周期 1.1 什么是生命周期函数 - 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 1.2 生命周期函数有哪些 创建阶段（4个） beforeCr.
仿大众点评——watch (监测变化) $route 对象和导航守卫beforeRouteEnter两种方法监听数据变化
qq_44997147的博客
01-07 1393
我在写仿大众点评的时候遇到一个问题：虽然进入不同商品详情页，router的path也变了，但是页面的数据没有发生改变。然后我看了Vue.js的官网，看到了这样一段话： 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 然后我...
vue导航守卫——全局路径监听
archer的技术故事
11-15 2966
vue导航守卫——全局路径监听 本文主要介绍如何通过vue的导航守卫进行路径的监听。 本文主要参考： https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好，下面上货。 1、import router from ’./router' 2、进行路径的拦截 router.beforeEach((
vue中用watch监听路由变化，改变导航样式
weixin_38673922的博客
05-22 1052
methods: { getIndex() { //头部导航样式设置：利用wacth监听，当路由发生变化 执行watch中的方法 if(this.$store.state.numStatus == 1){ //账号设置 跳至我的 this.activeclass = 4; }else if(this.$store.state.numStatus == 2){ //退出系统 跳至首页 this.activeclass = 1; }else if(thi..
watch监听不到路由的变化
u014788505的博客
12-30 1704
1. 首先watch是组件的一个属性，能监听到的前提是这个组件没有被销毁； 2. watch在父子路由间不会出现监听不到路由变化这种情况； 3. 监听不到是因为组件被销毁了，解决这种方法是在router-view外面 加一层标签keep-alive标签； 5. keep-alive存在的意义就是使组件不被销毁； <keep-alive> <router-view/> </keep-alive> ...
Vue教程11：利用JS实现路由跳转，路由监听和导航守卫
weixin_34265814的博客
12-15 600
示例代码请访问我的GitHub： github.com/chencl1986/… 利用JS实现路由跳转 代码示例：/lesson10/01. vue-router 最基本的路由.html 使用this.$router.push方法可以实现路由跳转，this.$router.replace实现替换当前路由。 两个方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。 通过t...
在路由守卫之前拿到vuex中异步请求数据——vuex中watch方法
hello，是翠花呀
07-12 3047
vuex中watch的使用 问题：在全局路由守卫中想要通过store拿到异步请求的数据，无法拿到。 我们常见使用vuex，一般是这样的： store模块文件写相关的数据信息，模块一test.js： export default { state: { obj: { count: 2 } }, mutations: { add(state){ return state.obj.count + 1 } }, actions: {
Vue中watch（侦听器）监听数据和路由发生改变
PILIpilipala的博客
12-02 1779
watch侦听器 侦听器(watch),就是当数据发生变化时,及时做出响应处理。Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 属性的侦听方式有两种： 1、实例中的watch属性 2、vm.$watch 监听数据 在前两个input框中输入数据之后，通过watch监听数据，同步显示在第三个input框中 <!DOCTYPE html> <html lang="en"> <head&gt
vue-router如何响应路由参数的变化（watch监听|导航守卫）
wenmin1987的博客
09-26 6641
什么是路由参数的变化 当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 监测路由参数变化的方法（watch监听|导航守卫） 方法一watch监听： watch: { // watch的第一种写法 $route (to, from) { console.log(to) console.log(from) } }, wa...
Vue.js中watch监听路由地址变更指南
3. **使用导航守卫**：Vue Router提供导航守卫，可以在路由发生变化时执行一些逻辑。导航守卫可以是全局的、针对单个路由的，也可以是在组件内定义的。 ### 总结 在Vue.js中，watch监听器提供了一种灵活的方式来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值