解决导航守卫router.beforeResolve使用不了this.$store

最新推荐文章于 2023-10-31 17:48:15 发布
最新推荐文章于 2023-10-31 17:48:15 发布
阅读量2.3k 收藏 1
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43424325/article/details/121332988
版权

在vue router的导航守卫如beforeEach()中是无法直接通过this.$store去操作vuex的，因为这里的this指向不一致。
正确写法

import store from '../store'
store.state....

解决方式是在router的index.js中引入初始化好的store
总结：我们在其他js或者vue文件中使用store,axios等这些js文件时，养成一个好的习惯，先导入在使用，而不是通过this.$使用

毛毛虫呜呜
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vueRouter--路由导航守卫
weixin_45846303的博客
08-08 319
导航守卫可以理解为切换路由时进行的一系列钩子调用，在这些钩子中我们可以决定是否触发下一个钩子，是否需要重定向路由，以及处理一些必要的数据等等，这些决定了路由是否可以切换。导航守卫可分为全局守卫，路由守卫，和组件内守卫。守卫是异步执行的，一个路由导航（或者说路由切换）在所有守卫执行完之前一直处于等待中。 总结： 1、导航守卫那些？ 全局 afterEach、beforeEach 、beforeResolve 路由beforeEnter 组件内：beforeRouteLeave 、beforeRouteUpda
vue2.0_路由守卫——登录权限设置（ 以vue router.beforeEach()为例 ）
QiuRenBB的博客
02-18 6421
前言： 什么是路由守卫？   官方的说法：   导航守卫(路由守卫)主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的、单个路由独享的、或者组件级的。   我方的说法：   路由守卫是指对路由跳转前做一些验证或者说操作一些事儿，目的是为了实现某些效果。比如没有登录的情况下，就不能进入到首页或者其它页面，只有登录了之后才有权限进入。简单讲就是路由拦截 、设置权限。 讲解前：为了方便理解，我先贴一张钩子函数的执行顺序图。先讲解一下路由守卫的组成和各个钩子的理解与应用，登录权限设置放在最后
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
10-15
主要介绍了vue中全局路由守卫中替代this操作(this.$store/this.$vux)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue router导航守卫使用不了this.$store
程序员大柱
10-29 1704
再使用导航守卫时候，需要判断vuex中的内容，但是没有this，偶然发现可以使用router这个对象获取到 import Vue from 'vue' import VueRouter from 'vue-router' import Map from '@/components/Map' import Service from '@/components/Service' import Conf...
vue2：路由前置守卫无法获取到this.$store.state.xxx
欢迎来到长风沛雨的博客
10-31 1486
在获取到vuex的数据时候，想在router目录下的index.js文件去获取到vuex仓库中声明的全局变量，但是通过this.$store.stote.xxx去获取的时候，报错提示：$store未定义。
Vue关于组件路由守卫无法获取this
neverGV的博客
06-17 2256
今天在写一个组件时候用到了组件路由守卫，但是在赋值时无法将路由中query的值绑定到组件的this中，这是因为 const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) {
解决导航守卫使用不了this.$store
Xiao_peng117的博客
05-10 1607
在vue router的导航守卫如beforeEach()中是无法直接通过this.$store去操作vuex的，因为这里的this指向不一致。 解决方式是在router的index.js中引入初始化好的store import store from '@/store' 然后在导航守卫中可直接拿到router了 /**导航守卫 */ router.beforeEach((to, form, next) => { console.log(store.getters) }) ...
路由导航守卫
tel15387005147的博客
12-30 390
路由导航守卫 router.beforeEach router.afterEach router.beforeResolve beforeEnter beforeRouteEnter beforeRouteUpdate(2.2 新增) beforeRouteLeave 1.全局前置守卫----router.beforeEach router.beforeEach注册一个全局前置守卫： const router = new VueRouter({ ... }) router.b..
Vue Router详解，Vue Router钩子函数详解
Niall_Tonshall的博客
03-01 1682
想必来查看笔者的这篇Vue Router文章的人，应该了解什么是Vue Router，至少知道其的作用是路由映射，所以笔者在这里不再赘述。 假设我们现在有一些简单的vue组件， MyHeader.vue: <template> <div class="container"> this is header of each page </div> </template> <script> export default { name
router.beforeResolve根据不同页面定义不同$http
caoyan0829的博客
01-16 6761
Vue.prototype.$http = axios; Vue.config.productionTip = false; Vue.prototype.$event = new Vue(); /* eslint-disable no-new */ var init = function() { new Vue({ el: "#app", router, stor...
Vue2的router.beforeEach不生效问题
qq_49416650的博客
04-03 1051
Vue的router.beforeEach不生效问题
路由守卫beforeEach,beforeResolve,afterEach
qq_26642611的博客
12-06 5066
index.js router.beforeEach((to, from, next) => { console.log('before each invoked'); if (to.fullPath === '/app') { // next('/login')//不仅可以写字符串还可以是一个对象 next({path: '/login', replace}) ...
vue路由导航守卫
weixin_52998620的博客
01-12 595
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 分为：全局、单个路由独享、组件级的 1、 全局守卫 都是在main.js中去写的 (1)、全局前置守卫 router.beforeEach (2)、全局解析守卫 router.beforeResolve (3)、全局后置钩子 router.afterEach 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫（在router/index.js） router.beforeEach((to, fr
Vue中$router，路由守卫beforeEach 的使用，以及 this.$router.push两种方式的区别
CheyBen的博客
04-02 1万+
一、$router 在 Vue 实例内部，可以通过$router访问路由实例，即通过调用this.$router.push进行连接跳转。 $router.push()传参的两种方式： 1、this.$router.push({name:xx, params:{a:xx, b:xx}})//a, b是我们要传递给另一个页面的参数 目标页面通过this.$route.pa...
路由的导航守卫及 beforeEach 和 beforeResolve的区别
weixin_60408555的博客
04-27 7851
路由导航守卫？ 路由守卫就是路由跳转的时候会触发的钩子函数我们把他称为路由守卫 vue一共为我们提供了三种路由守卫 全局守卫 beforeEach 路由进入之前 beforeResolve 路由解析之前 这个几乎不用 afterEach 路由进入之后 组件内置守卫 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前 路由独享守卫 beforeEnter 路由进入之前 在项⽬中我们经常使⽤路由守卫实现
Vue 导航解析流程 router.beforeEach使用避坑
weixin_63539078的博客
06-25 1641
Vue 导航解析流程 router.beforeEach使用避坑
路由守卫的详解
热门推荐
qq_59076775的博客
05-12 2万+
路由守卫总共有7个 全局路由守卫: beforeEach 前置守卫 affterEach 后置守卫 beforeResolve 解析守卫 路由的守卫 beforeRouterEnter 进入组件之前触发,在Created前面 beforeRouterUpdated 路由更新但是内容不会改变 beforeRouterLeave 离开之前触发,在beforeDestory之前触发 路由独享守卫 beforeEnter 读取路由的信息 一.进入一个页面路由所执行的钩子
VueRouter
qw2319205chu的博客
03-06 422
前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西是比官网还详细的.你想要的,在官网上没理解的,基本在这里都能找到解答!本来想分成两篇发的,但想想男人长点也没什么不好的.所以也希望各位收藏插眼标记(滑稽) 特点:本文主要是参考了官方文档.除了不常用的过渡动效和数据...
this.$router.resolve this.$router.push怎样区分
最新发布
04-11
this.$router.resolve和this.$router.push是Vue.js中用于进行路由导航的方法，它们的区别如下： 1. this.$router.resolve(path): - 这个方法用于解析指定路径的路由信息，但并不会导航到该路径。 - 它返回一个包含解析后的路由信息的Promise对象，可以通过.then()方法获取解析结果。 - 通常用于在代码中动态获取路由信息，例如判断某个路径是否存在或获取路径对应的组件。 2. this.$router.push(location, onComplete?, onAbort?): - 这个方法用于进行路由导航，将用户导航到指定的路径。 - location可以是一个字符串路径，也可以是一个描述地址的对象。 - onComplete是一个导航完成后的回调函数，onAbort是一个导航被中断后的回调函数。 - 通常用于响应用户操作，进行页面跳转或者切换路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值