vue 中 watch 与导航守卫

最新推荐文章于 2022-09-17 09:09:23 发布
最新推荐文章于 2022-09-17 09:09:23 发布
阅读量321 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827421/article/details/95979691
版权

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

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

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

摇摆小仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的生命周期
y1234569q的博客
04-22 122
1.什么是生命周期函数 生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 ## 1.1 生命周期函数有哪些 创建阶段 - beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this - created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了 -..
Vue入门【十一】-- 导航守卫与路由模式
qq_48802092的博客
10-04 1053
路由的两种模式及其区别？ hash模式：会在路由路径携带#，不会请求服务器，工作原理是hashchange事件,支持低版本浏览器 history模式：不会在路由路径携带#，会请求服务器，工作原理是go/back/ forward，是h5新增的api，不支持低版本浏览器。
Vue笔记第六天(设置cook、导航守卫、watch和filter的补充)
qq_43378800的博客
08-12 232
第六天 1.axios发post请求 axios .post( 网址,{传递给服务器的参数 }) .then(backData=>{}) 2.设置让axios发请求时默认带cookie 原因:axios 跨域默认不携带cookie 解决办法:axios.defaults.withCredentials = true; 3.导航守卫 ①.全局导航守卫–作用：可以在跳转到另一个路由之前，帮你做一...
怎么监听路由的改变的两种方式（watch，路由守卫）
weixin_56115652的博客
09-17 300
有时候在项目中要监听路由的变化，如路由传值等 。 warth（监听路由） warth监听路由的参数按常规的 。
使用watch监听导航切换来控制导航栏的有无
weixin_44632257的博客
07-27 274
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面试题-路由守卫 / 导航守卫
最新发布
02-03
在面试中，面试官可能会提出关于“路由守卫”或“导航守卫”的问题，这是Vue Router的一个重要特性，用来控制用户的导航行为，确保只有授权的用户才能访问特定的页面。 1. **路由守卫 / 导航守卫**： - 路由守卫...
vue2.0 elementUI制作面包屑导航栏
08-28
1. Vue Router 路由守卫：在Main.js文件中，我们使用了Vue Router的路由守卫功能，通过beforeEach方法来监听页面路由的变化。在这个方法中，我们可以对路由列表进行操作，例如删除或添加路由项。 2. ElementUI 面包...
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
12-09
#在切换路由时，组件会被复用，不过，这也意味着组件的生命周期钩子不会再被...使用 2.2 中引入的 beforeRouteUpdate 导航守卫： const User = { template: '...', beforeRouteUpdate (to, from, next) { // react
vue实例练习与总结
08-12
6. **路由管理**：如果项目中包含了Vue Router，那么会涉及到路由配置和导航守卫。Vue Router是官方的路由管理器，它使单页应用的导航变得简单。 7. **状态管理**：Vuex是Vue的状态管理模式，它集中管理组件间的...
VUE 使用中踩过的坑
11-30
为了防止用户意外丢失输入数据，可以使用Vue Router的导航守卫（如`beforeRouteLeave`）来在用户离开当前页面前进行提示或自动保存草稿： ```javascript router.beforeRouteLeave(to, from, next) { if (用户...
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
01-18
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue里面提供了三大类钩子，两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子 两种函数： 1. router.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2. router.afterEach(function(to,form)}{}) /*在跳转之后判断*/ 全局钩子函数 顾名思义，它是对全局有效的一个函数 // router.jsconst rout
​watch深度监听失效解决方案以及原因​
qq_39974331的博客
12-07 7234
总结： watch深度监听失效一般是由于变化的属性未初始化，导致watch进行深度监听初始化时，没有录入进去，从而导致监听失效。可以使用this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)这样可以必然触发watch的监听。 案发情况： 首先，watch监听一般都这么写： watch: { obj(newVal, oldVal) { // todo console.log(newVal, oldVal) } } 复制代码 但是w...
必背的小技巧让你轻松过关
links_577073699的博客
04-24 1110
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、生命周期1.1 什么是生命周期函数1.2 生命周期函数有哪些1.3 项目开发中 在生命周期里都做过什么功能1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?二、vuex 的理解三、 vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解 一、生命周期 1.1 什么是生命周期函数 - 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 1.2 生命周期函数有哪些 创建阶段（4个） beforeCr.
Vue中使用watch监听属性以及深度监听
m0_56219678的博客
02-22 2720
Vue中使用watch监听属性以及深度监听
Vue中watch的详解
热门推荐
RayShyy的博客
07-08 3万+
2.1 watch基础语法 被监听的数据：data中定义的数据； 数据改变后的值：该数据改变后的新值； 数据改变之前的值：该数据改变之前的值。 2.2 watch监听单个简单数据类型 在输入框中输入文本后： 这里text改变了三次，分别输入1、2、3，得到如上输出。2.3 监听复杂数据类型的某个属性的变化 检测某个属性值的时候需要用对象.属性名的写法，用法和简单数据类型一致。2.4 immediate (立即处理 进入页面就触发) 2.5 deep 深度监听 3. watch简写形式 代码如下：..
vue导航守卫——全局路径监听
archer的技术故事
11-15 2930
vue导航守卫——全局路径监听 本文主要介绍如何通过vue的导航守卫进行路径的监听。 本文主要参考： https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好，下面上货。 1、import router from ’./router' 2、进行路径的拦截 router.beforeEach((
仿大众点评——watch (监测变化) $route 对象和导航守卫beforeRouteEnter两种方法监听数据变化
qq_44997147的博客
01-07 1325
我在写仿大众点评的时候遇到一个问题：虽然进入不同商品详情页，router的path也变了，但是页面的数据没有发生改变。然后我看了Vue.js的官网，看到了这样一段话： 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 然后我...
watch监听不到路由的变化
u014788505的博客
12-30 1596
1. 首先watch是组件的一个属性，能监听到的前提是这个组件没有被销毁； 2. watch在父子路由间不会出现监听不到路由变化这种情况； 3. 监听不到是因为组件被销毁了，解决这种方法是在router-view外面 加一层标签keep-alive标签； 5. keep-alive存在的意义就是使组件不被销毁； <keep-alive> <router-view/> </keep-alive> ...
2023年Vue面试焦点：生命周期与watch、computed深度解析
- 负责页面跳转和导航，处理动态路由、命名路由、路由守卫等。 8. **插槽（Slot）** - 用于组件间的自定义内容分发，提供了一种将内容插入到组件模板中的方式。 9. **过滤器（Filter）** - 用于数据格式化，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值