首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

$route(to,from) inside watch在ie中不起作用

$route(to, from) inside watch在ie中不起作用是因为IE浏览器不支持ES6的箭头函数语法。在IE中,箭头函数中的this指向的是全局对象而不是Vue实例,所以无法正确访问$route对象。

解决这个问题的方法是使用普通的函数表达式来替代箭头函数,并且在Vue实例的created钩子函数中手动监听$route的变化。具体的代码如下:

代码语言:txt
复制
created: function() {
  var self = this;
  this.$watch('$route', function(to, from) {
    // 在这里处理$route的变化
    // 可以根据to和from的值来执行相应的操作
  });
}

在上述代码中,我们使用了普通的函数表达式来定义了一个监听器,然后在created钩子函数中使用this.$watch方法来监听$route的变化。在监听器中,我们可以根据to和from的值来执行相应的操作。

需要注意的是,由于IE浏览器不支持ES6的语法,所以在使用Vue时需要使用Babel等工具将代码转换为ES5的语法,以保证在IE中的兼容性。

关于Vue Router的更多信息,你可以参考腾讯云的相关文档和产品:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue2升级vue3:composition api监听路由参数改变

vue2 的watch回顾我们先回顾一下vue2watchwatch性能优化:vue watch对象键值说明-immediate属性详解》《vuemethods/watch/computed对比分析...,watch及computed原理挖掘》watch和computed很相似,watch用于观察和监听页面上的vue实例,当然大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销...监听路由变化https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setuphttps.../ 使用了props  }  watchEffect(initData)  //initData立即执行,且当props依赖的数据改变时,会自动执行}组件内watchsetup() {   const...官方文档给的案例也是这个:https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup

1.4K10
  • 一步一步学Vue(六)

    $mount("#app");   路由的配置方式上一篇文章已经做过介绍,这里陌生的部分在于ArticleListComponent的created...vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document。...每一个阶段都会有一个钩子函数,方便开发者不同阶段处理不同逻辑;其它钩子函数我们使用的时候会继续介绍。一般可以created函数调用ajax等来获取页面初始化所需的数据。   ...,当你发现路由变化的时候,组件数据未更新,可以考虑由于组件重用导致的生命周期钩子未执行的情况,当然解决方式也不止这一种,vue-router 2.2+也增加了钩子函数同样能解决问题。...而且通过watch方式有点侵入,感觉和在angular中使用watch类似,个人不推荐这种写法;我们简单修改下我们程序,作为本篇代码的最后一版本: var ArticleListComponent =

    42110

    vue-router详解及实例

    方式一:简单地watch(监测变化)$route对象 watch: { '$route' (to, from) { // 对路由变化作出响应... } } 方式二:使用...一个路由匹配到的所有路由记录会暴露为 $route 对象(还有导航守卫的路有对象)的 $route.matched 数组。...导航完成之后获取:先完成导航,然后接下来的组件生命周期钩子获取数据。在数据获取期间显示『加载』之类的指示。 该方式会马上导航和渲染组件,然后组件的 created 钩子获取数据。...$route $route 观察者回调内 router.match(location) 的返回值 导航守卫的参数: router.beforeEach((to, from, next) => {..."> 会好一些,理由如下: 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者 IE9 降级使用 hash 模式,无须作任何变动。

    2.9K31

    vue-router(路由)详细教程

    当匹配到一个路由时,参数值会被设置到this.route.params,可以每个组件内使用。 你可以一个路由中设置多段『路径参数』,对应的值都会设置到 route.params 。...复用组件时,想对路由参数的变化作出响应的话: (1). watch(监测变化) $route 对象: const User = { template: '......', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } (2).beforeRouteUpdate 导航守卫 如果目的地和当前路由相同,只有参数发生了改变...alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了的内容。 ★★★.注意一个大坑: 别名aliaspath为’/’,是不起作用的。...导航完成之后获取:先完成导航,然后接下来的组件生命周期钩子获取数据。在数据获取期间显示『加载』之类的指示。

    3K30

    常见经典vue面试题(面试必问)

    当表达式过于复杂时,模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性处理图片{{fullName}}export default {...其实就是官网上说的监听一个getterwatchEffect如果监听reactive定义的对象是不起作用的,只能监听对象的属性看一下watchEffect的代码 请输入.../baseHandlers"; // 代理相关逻辑import { isObject } from "....声明的或者父组件传递过来的props的数据,当发生变化时,会触发其他操作,函数有两个的参数:immediate:组件加载立即触发回调函数deep:深度监听,发现数据内部的变化,复杂数据类型中使用,...相关代码如下import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑import { isObject } from ".

    89820

    vue-router 用法详解

    想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象: const User = { template: '......', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } # 或者使用 2.2 引入的 beforeRouteUpdate 守卫:...) # router.go(n)==window.history.go** 这个方法的参数是一个整数,意思是 history 记录向前或者后退多少步. // 浏览器记录前进一步,等同于 history.forward...// watch $route 决定使用哪种过渡 watch: { '$route' (to, from) { const toDepth = to.path.split('/').length... IE9 ,设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。

    2.5K20

    Vue官方路由管理器Vue-router入门教程

    IE9 自动降级 自定义的滚动条行为 安装 npm install vue-router main.js 通过 Vue.use() 明确地安装路由功能: import Vue from 'vue...$route.params,可以每个组件中使用,于是,我们可以更新 User 的模板,输出当前用户的 ID:        用户页面{{$route.params.id...复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象: /*使用watch(监测变化) $route对象  watch: {         $route...我们可以通过两种方式来实现: 导航完成之后获取:先完成导航,然后接下来的组件生命周期钩子获取数据。在数据获取期间显示“加载”之类的指示。...导航完成之前获取:导航完成前,路由进入的守卫获取数据,在数据获取成功后执行导航。 导航完成后获取数据: 当你使用这种方式时,我们会马上导航和渲染组件,然后组件的 created 钩子获取数据。

    2.4K20

    Vue官方路由管理器Vue-router入门教程

    IE9 自动降级 自定义的滚动条行为 安装 npm install vue-router main.js 通过 Vue.use() 明确地安装路由功能: import Vue from 'vue...$route.params,可以每个组件中使用,于是,我们可以更新 User 的模板,输出当前用户的 ID:        用户页面{{$route.params.id...复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象: /*使用watch(监测变化) $route对象  watch: {         $route...我们可以通过两种方式来实现: 导航完成之后获取:先完成导航,然后接下来的组件生命周期钩子获取数据。在数据获取期间显示“加载”之类的指示。...导航完成之前获取:导航完成前,路由进入的守卫获取数据,在数据获取成功后执行导航。 导航完成后获取数据: 当你使用这种方式时,我们会马上导航和渲染组件,然后组件的 created 钩子获取数据。

    26320

    Vue 全家桶,深入Vue 的世界

    IE9 ,设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。...一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有导航守卫的路由对象) 的 $route.matched 数组。...因此,我们需要遍历 $route.matched 来检查路由记录的 meta 字段。...$route.matched 类型: Array 一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组的对象副本 (还有 children 数组)。...为了解决这个问题,我们可以使用mapState辅助函数帮助我们生成计算属性,让你少按几次键: // 单独构建的版本辅助函数为 Vuex.mapState import { mapState } from

    2.7K20

    Vue Router 10 条高级技巧

    IE9 自动降级 自定义的滚动条行为 本文是作者是实际项目中遇到的一些总结,主要包括: 响应路由参数变化 路由匹配 高级匹配模式 匹配优先级 push和replace的第二个第三个参数 路由视图 重定向...watch监听 watch: { '$route' (to, from) { // 对路由变化作出响应... } } beforeRouteUpdate beforeRouteUpdate...你可以界面拥有多个单独命名的视图,而不是只有一个单独的出口。 如果 router-view 没有设置名字,那么默认为 default。...使用props解耦$route 组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。...beforeRouteEnter调用之后调用。 router.afterEach 全局后置钩子 进入路由之后。 // 入口文件 import router from '.

    1.2K40

    LVS高并发负载均衡实现 原

    {     state MASTER #指定那个为master,那个为backup,如果设置了nopreempt这个值不起作用,主备考priority决 定     interface eth0 #...,将其设为0,而不是直接从ipvs删除              notify_up  |  #检测到server up后执行脚本             ...,将其设为0,而不是直接从ipvs删除              notify_up  |  #检测到server up后执行脚本             ...,将其设为0,而不是直接从ipvs删除              notify_up  |  #检测到server up后执行脚本             ...,将其设为0,而不是直接从ipvs删除              notify_up  |  #检测到server up后执行脚本

    85420
    领券