精华内容
下载资源
问答
  • vue监听路由变化

    千次阅读 2020-09-11 15:06:06
    一、监听路由从哪儿来到哪儿去 比如:我们想通过跳转改变路由从而 刷新侧边栏,或者头部选中的内容时候,就可以在你的侧边栏组件或者头部组件里面用下面这个,推荐第一个,很实用 watch:{ $route(to,from){ ...

    前言:

          向我们在vue项目中很多情况会遇到跨组件调用时间,有的时候vuex比较适合,有的时候是希望路由变换在调用方法。

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

    比如:我们想通过跳转改变路由从而 刷新侧边栏,或者头部选中的内容时候,就可以在你的侧边栏组件或者头部组件里面用下面这个,推荐第一个,很实用

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

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

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

    三、监听路由变化触发方法

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

    四、全局监听路由(这里一般我们都是router里面加跳转校验才会用到这个方法)
    app.vue的create种加入下面代码,然后进行判断

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

    2020-09-24 21:29:00
    如果在某一个页面做监听 watch:{ $route(to,from){ let topath = to.path; let formPath=from.path; 如果此时再通过接口获取到登陆用户有多少页面权限,就直接判断。 没有权限就可以 setTimeOut(function...

    如果在某一个页面做监听

    watch:{
    	$route(to,from){
    		let topath = to.path;
    		let formPath=from.path;
    		如果此时再通过接口获取到登陆用户有多少页面权限,就直接判断。
    		没有权限就可以
    		setTimeOut(function(){
    				window.open("","_self").colse();
    			},2000)
    			//或者没有权限直接去固定的页面
    			this.$router.push({path:"/errorPath"});
    			
    		}
    	}
    }
    

    如果在最外层做监听,在app.vue里面

    created(){
    	this.$router.beforeEach((to, from, next) => {
    	   	if(to.path!='/XXXX'){
    	   		this.$router.push({path:"/errorPath"});
    	   		next();
    		}
    		next();
    });
    }
    
    //如果在路由里面做路由守卫
    //这里有两个参数,一个是errorPath,这个表示页面加载失败,或者没权限的跳转页面,
    //一个是routeList这个可以是后端通过权限返回的页面列表,
    //先进入errorPath可以避免权限没有一直进入不到页面的问题
    
    router.beforEach(async(to,from,next)=>{
    		if(to.path=='errorPath'){
    			next();
    		}else{
    			if(routeList.indexOf(to.path)<-1){
    				next();
    			}else{
    				next({path:'errorPath'})
    			}
    			
    		}
    })
    
    展开全文
  • Vue 监听路由变化

    千次阅读 2019-03-05 18:28:41
    Vue.js 官方文档中提供了导航完成后获取数据 和在导航完成前获取数据两种方法,我个人使用的是前者,这个需要小伙伴们自己按照需求来定。文档地址 现在着重说一下导航完成后获取数据中的不同的写法: 第一种 ...

    Vue.js 官方文档中提供了 导航完成后获取数据 和 在导航完成前获取数据 两种方法,我个人使用的是前者,这个需要小伙伴们自己按照需求来定。文档地址

    现在着重说一下 导航完成后获取数据 中的不同的写法:

    第一种

    watch: {
       $route:{
          handler(val, oldVal){
             let that = this;
             console.log(val,'监控路由变化');
             if(val.name === '你的router配置的name值'){
                //在这里做你要做的事
             }
          },
          deep:true //深度监听
       }
    }

    或者

    watch: {
       '$route':'getPath'
    },
    methods: {
       getPath(){
           console.log(this.$route.path);
           //你的逻辑代码或数据请求
       }
    },

    以上的这两种写法 只是单纯的去监听你的 router 的变化 也就是你 router 配置的 path 的变化。

    实用场景:A页面通过 router-link 跳转B页面,通过 to="{name:' ',params:{}}" 传递参数,在B页面拿到你所传过来的参数后,路由发生变化,监听捕获数据,然后执行你你逻辑代码。

    内容提升及补充:Vue Router 中的 在导航完成前获取数据 还提供了 beforeRouteEnter  beforeRouteUpdate 两个钩子函数

    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不!能!获取组件实例 `this`
        // 因为当钩子执行前,组件实例还没被创建
    },
    
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
    },

    其中 beforeRouteEnter 当数据获取成功后只调用  next  方法。( 官文原话 )

     

    ---------------------------------------------------------------   END   ------------------------------------------------------------------

    珍惜眼前人,莫要失去才懂珍惜~~~

    展开全文
  • 主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue监听路由变化的几种方式【Vue】

    千次阅读 2020-07-27 16:33:28
    vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由变化呢?当然是利用vue中的 watch ,请看代码。 一、监听路由从哪儿来到哪儿去 在这里插入代码片

    vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?当然是利用vue中的 watch ,请看代码。

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

    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'
    }
    

    四、全局监听路由

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    const router = new Router({
      routes: [
        {
          path: '/wechat-user-statistics',
          name: 'wechat-user-statistics',
          component: WechatUserStatistics
        },
        ....
      ]
    })
    // 全局监听路由
    router.beforeEach((to, from, next) => {
        console.log(to);
        next();
    });
    
    export default router
    

    五、组件内部监听

     beforeRouteEnter (to, from, next) {
         // 在渲染该组件的对应路由被 confirm 前调用
         // 不!能!获取组件实例 `this`
         // 因为当钩子执行前,组件实例还没被创建
     },
     beforeRouteUpdate (to, from, next) {
    	 // 在当前路由改变,但是该组件被复用时调用
    	 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    	 // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    	 // 可以访问组件实例 `this`
     },
     beforeRouteLeave (to, from, next) {
    	 // 导航离开该组件的对应路由时调用
    	 // 可以访问组件实例 `this`
     }
    
    展开全文
  • Vue监听路由变化的方式 VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢? 一、 通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to....
  • //方案一:监听,当路由发生变化的时候执行 watch:{ //最普通的写法 $route(to,from){ console.log(to.path); } }, //方案二:监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal...
  • VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?...监听路由变化获取新老路由信息 watch:{ $route:{ handler(val,oldval){ console.log(val);//新路由信
  • 本仙女亲测有效: 只需要在App.vue文件的router-view标签中加上:key="$route.fullPath"即可
  • 今天小编就为大家分享一篇vue实现路由监听和参数监听,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue监听路由变化及路由跳转锚点

    千次阅读 2019-12-03 16:57:49
    watch: { // 监听路由变化 $route(to,from){ console.log(to.hash); if(to.hash){ let num=to.hash.split(''); console.log(num) ...
  • 1 vue监听路由参数变化,路由变化的时候刷新数据 path的路径还是本页面,通过query传入query数据,但是页面数据没有刷新 <router-link tag="div" :to="{path:'/playList',query:{id:item.id}}"></router-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,672
精华内容 9,468
关键字:

vue监听路由变化

vue 订阅