精华内容
下载资源
问答
  • vue监听路由变化
    2022-03-24 19:50:32
    watch: {
        $route(to, from) {
          if(from.path == "/league_mgr/down_club_table" && to.path == "/club_mgr/club_find") {
            this.openThisPage()
          }
        }
        /*
        $route: {
          immediate: true, // watch中的监听,第一次创建的时候,不会立即执行,加上这个参数,会立即执行
          handler(to, from) {
            console.log("111 ------ ", to.name, to.path);
            console.log("111 ------ ", from.name, from.path); // 注意,如果刷新页面,则没有from
          },
        },
        */
      },
    
    更多相关内容
  • vue 监听路由变化

    千次阅读 2020-10-27 15:59:31
    在多页面开发中我们总是要通过路由来...1.组件内监听路由的方式: watch:{ $route (to,from) { console.log(to.path) console.log(from.path) } }, // 监听新老路由变化信息 watch:{ $route:{ handler(newVal,

    在多页面开发中我们总是要通过路由来映射不同的组件,这样势必就涉及到页面与页面之间的交互,比如传参,A页面=>B页面的拦截,当A跳转成功后B页面做相应的动作等等,许多操作。

    Vue路由官网

    1.组件内监听路由的方式:

    watch:{
      '$route' (to,from) {
        console.log(to, from)
        if (to.query.id !== from.query.id) {
    		this.id = this.$route.query.id
    		this.name = this.$route.query.name
    	}
      }
    },
    

    或者监听$route.path的变化:

    watch: {
    	'$route.path':function(newVal,oldVal){
           if(newVal === '/login'){
             this.$router.push('/login')
           } else if(newVal === '/register'){
             this.$router.push('/register')
             // this.$router.push({path: '/register', query: {userId: 123}})
             // this.$route.push({name: 'register', params: {userId: 123}})
           }
         }
    }
    
    // 监听新老路由变化信息
    watch:{
        $route:{
          handler(newVal, oldval){
            console.log(newVal)
            console.log(oldval)
          },
          // 深度监听
          deep: true
        }
      }
    

    (3)监听路由变化执行相应的方法:

    methods:{
      getRoutePath () {
        console.log(`routePath is: , ${this.$route.path}`)
      }
    },
    watch:{
      '$route':'getRoutePath' // 当路由发生变化时,触发相应的操作
    }
    

    (4)全局监听路由变化

    // 在App.vue的created()钩子函数中手动监听所有路由的变化
    this.$router.beforeEach((to, from, next) => {
        console.log(to.name);
        next(); // 手动调用next方法
    });
    
    // 举个栗子:
    watch: {
    // (1) 监听路由是否发生变化
    '$route' (to, from) {
    	if(to.query.id !== from.query.id){
    		this.id = to.query.id
    		this.initData();//重新加载数据
    	}
      }
    }
    
    // (2) 设置路径变化时的处理函数
    watch: {
      '$route': {
    	  handler: 'initData',
    	  immediate: true
    }
    // 可以给router-view添加一个不同的key,这样vue在渲染时会知道这是完全不同的组件,
    // 只要路由发生改变,就会重新创建这个组件。
    
    <router-view :key="key"></router-view>
    // 在计算属性中给它的后面追加时间戳,这样每次加载都会重新加载
    computed: {
      key() {
        return this.$route.name !== undefined 
        ? `${this.$route.name} ${new Date().getTime()}`
        : `${this.$route.name} ${new Date().getTime()}`
      }
    }
    
    展开全文
  • Vue监听路由变化的方式 VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢? 一、 通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to....

    Vue监听路由变化的方式

    VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?

    一、 通过 watch

    // 监听,当路由发生变化的时候执行
    watch:{
      $route(to,from){
        console.log(to.path);
      }
    },
    或者
    // 监听,当路由发生变化的时候执行
    watch: {
      $route: {
        handler: function(val, oldVal){
          console.log(val);
        },
        // 深度观察监听
        deep: true
      }
    },
    或者
    // 监听,当路由发生变化的时候执行
    watch: {
      '$route':'getPath'
    },
    methods: {
      getPath(){
        console.log(this.$route.path);
      }
    }
    

    方法二::key是用来阻止“复用”的

    Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)
    使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。

    <router-view :key="key"></router-view>
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
      }
    }
    

    方法三:通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

    <script>
      export default {
        name: 'app',
        // 监听,当路由发生变化的时候执行
        beforeRouteEnter (to, from, next) {
          // 在渲染该组件的对应路由被 confirm 前调用
          // 不!能!获取组件实例 `this`
          // 因为当钩子执行前,组件实例还没被创建
        },
        beforeRouteUpdate (to, from, next) {
          // 在当前路由改变,但是该组件被复用时调用
          // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
          // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
          // 导航离开该组件的对应路由时调用
          // 可以访问组件实例 `this`
        }
    </script>
    
    展开全文
  • VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?...监听路由变化获取新老路由信息 watch:{ $route:{ handler(val,oldval){ console.log(val);//新路由信

    VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?

    监听路由从哪儿来到哪儿去

    watch:{
        $route(to,from){
          console.log(from.path);//从哪来
          console.log(to.path);//到哪去
     	}
     }
    

    监听路由变化获取新老路由信息

    watch:{
        $route:{
          handler(val,oldval){
            console.log(val);//新路由信息
            console.log(oldval);//老路由信息
          },
          // 深度观察监听
          deep: true
        }
      }
    

    监听路由变化触发方法

    methods:{
      getPath(){
        console.log(1111)
      }
    },
    watch:{
      '$route':'getPath'
    }
    

    全局监听路由

    在app.vue的create或main.js进行路由判断,一般是在main.js中

    this.$router.beforeEach((to, from, next) => {
        console.log(to);
        next();
    });
    
    展开全文
  • Vue 监听路由变化

    万次阅读 2018-03-07 22:32:51
    watch:{ //监听路由变化 $route( to , from ){ console.log( to , from ) // to , from 分别表示从哪跳转到哪,都是一个对象 // to.path ( 表示的是要跳转到的路由的地址 eg: /home ); ...
  • vue监听路由变化的几种方式【Vue】

    千次阅读 2020-07-27 16:33:28
    vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由变化呢?当然是利用vue中的 watch ,请看代码。 一、监听路由从哪儿来到哪儿去 在这里插入代码片
  • Vue 监听路由变化,然后重载当前页面 有时候,我们需要通过监听路由中参数的变化来重载当前页面内容,重新执行当前页面的 mounted() 这个生命周期, 但如果 location.reload() 是重载了整个项目,那么如何重载当前...
  • // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 1 2 3 4 5 6 7 8 9 10 // 监听,当...
  • nuxt,vue 监听路由变化

    千次阅读 2020-12-21 14:05:42
    本文档为个人博客文档系统的备份版本、作者:小游、作者博客:点击访问 watch: { '$route' (res) { console.log('路由变化') console.log(res) } },
  • 主要介绍了vue监听路由参数的变化,给大家介绍了vue监听路由参数变化的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本仙女亲测有效: 只需要在App.vue文件的router-view标签中加上:key="$route.fullPath"即可
  • Vue 监听路由变化的三种方式

    千次阅读 2021-08-25 07:18:44
    // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); ...
  • 1 vue监听路由参数变化,路由变化的时候刷新数据 path的路径还是本页面,通过query传入query数据,但是页面数据没有刷新 <router-link tag="div" :to="{path:'/playList',query:{id:item.id}}"></router-...
  • Vue监听路由变化

    千次阅读 2020-04-20 16:52:49
    一加载进来在mounted中获取初始值,之后在watch中监听变化。 mounted:function(){ var _this = this; //一加载进来,或者刷新页面时,根据路径显示面包屑导航 var hash = _this.$route.path; var hashArr = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,622
精华内容 11,048
关键字:

vue监听路由变化