精华内容
下载资源
问答
  • 下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue.js使用watch监听路由变化的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • watch监听路由变化详解

    千次阅读 2021-03-10 14:42:17
    一、watch监听路由的方法 通过watch监听,当路由发生变化的时候执行。 方法一: watch:{ $router(to,from){ console.log(to.path) } } 方法二: watch: { $route: { handler: function (val, oldVal){...

    一、watch监听路由的方法

    通过watch监听,当路由发生变化的时候执行。

    方法一:

    watch:{
      $router(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文档原话)

     

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

     

    使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。

    三、全局监听路由(通过vue-router的钩子函数beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    一般会在router里面加跳转验证才会用到这个方法

    方法一:

     

    watch:{
           $route(to,from){
             if (to.path ==  '/'  || to.path ==  '/Prisoner'  || to.path ==  '/Goods'  || to.path ==  '/Time'  || to.path ==  '/Mine' ){
               /**
                * $store来自Store对象
                * dispatch 向 actions 发起请求
                */
               this .$store.dispatch( 'showTabBar' );
             } else {
               this .$store.dispatch( 'hideTabBar' );
             }
           }
         },
         beforeRouteEnter (to, from, next) {
           // 在渲染该组件的对应路由被 confirm 前调用
           // 不!能!获取组件实例 `this`
           // 因为当钩子执行前,组件实例还没被创建
         },
         beforeRouteUpdate (to, from, next) {
           // 在当前路由改变,但是该组件被复用时调用
           // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
           // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
           // 可以访问组件实例 `this`
         },
         beforeRouteLeave (to, from, next) {
           // 导航离开该组件的对应路由时调用
           // 可以访问组件实例 `this`
         },
    

     

    方法二:

    在app.vue的create中加入下面代码,然后进行判断

    this.$router.beforeEach((to ,from,next) =>{
           console.log(to);
           next(); 
    })
    展开全文
  • 使用watch监听路由变化(当路由发生变化的时候执行) 方法一: watch:{ $route(to,from){ console.log(to.path); } }, 方法二: watch: { $route: { handler: function(val, oldVal){ console.log(val); ...

    使用watch监听路由变化(当路由发生变化的时候执行)

    1. 方法一:
    watch:{
      $route(to,from){
        console.log(to.path);
      }
    },
    
    1. 方法二:
    watch: {
      $route: {
        handler: function(val, oldVal){
          console.log(val);
        },
        // 深度观察监听
        deep: true
      }
    },
    
    1. 方法三:
    watch: {
      '$route':'getPath'
    },
    methods: {
      getPath(){
        console.log(this.$route.path);
      }
    }
    
    展开全文
  • vue watch监听路由变化

    2020-12-05 20:24:20
    在vue日常使用中watch常用来监听数据的变化,今天也是由一些问题用到了监听路由的转换。 watch: { '$route.path': { immediate: true, handler: function (newVal, oldVal) { this.activePath = newVal } } }...

    在vue日常使用中watch常用来监听数据的变化,今天也是由一些问题用到了监听路由的转换。

    watch: {
        '$route.path': {
          immediate: true,
          handler: function (newVal, oldVal) {
            this.activePath = newVal
          }
        }
      }
    

    此代码片段中,watch监听的路由地址成为了对象,并且有两个属性,第一个属性是vue提供的一种刚初始化页面就会监听一次,这样会解决刷新页面不触发监听事件从而达不到监听器的预期效果。
    第二个属性是一个函数,接收两个参数,第一个参数是新的路由地址,第二个是之前的路由地址。

    展开全文
  • import { watch } from 'vue' import { useRoute } from 'vue-router' setup() { const route = useRoute() watch(() => route.params.id, ...不会导致组件的销毁重建,可以实时监听到理由id的变化 上面是vu.
    import { watch } from 'vue'
    import { useRoute } from 'vue-router'
    setup() {
      const route = useRoute()
    	watch(() => route.params.id, (newVal) => {
        if(newVal) {
        	// 重新获取数据....
        }
      }, {immediate: true})
    }

    不会导致组件的销毁重建,可以实时监听到路由id的变化

    上面是vue3.0的写法,接下来来看下 2.0写法:

    watch:{
    "$route.params.id":async function (new, old) {//获取数据}
    }

    展开全文
  • 解决办法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } }
  • //头部导航样式设置:利用wacth监听,当路由发生变化 执行watch中的方法 if(this.$store.state.numStatus == 1){ //账号设置 跳至我的 this.activeclass = 4; }else if(this.$store.state.numStatus ...
  • vue watch 监听路由变化

    千次阅读 2018-07-07 11:33:14
    watch监听路由变化 当路由改变时,运行newpage函数。 export default { watch: { '$route': 'newpage' }, methods: { newpage() { //do something; }, }, };...
  • watch监听路由变化

    2019-11-26 20:11:04
    watch监听非DOM元素eg:路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue-.....
  • watch 监听路由参数变化

    千次阅读 2020-07-19 12:00:05
    "$route.params.id"(){ // 监听路由变化 // 组件第一次进入不会执行 console.log("id 变化了",this.$route.params.id) }, "$route.params.id":{ immediate:true, // 一开始的数据也要当做一种变化 handler...
  • 通过 watch 监听,当路由发生变化的时候执行 方法一 watch:{ $router(to,from){ console.log(to.path) } } 方法二: watch:{ $route:{ handler : function(val,oldVal){ console.log(val) }, // 深度观察...
  • vue使用watch监听路由地址的变化

    千次阅读 2020-07-12 16:43:33
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...Do.
  • Vue使用watch监听路由变化

    万次阅读 2018-09-29 18:03:07
    watch除了可以监听data中数据的变化,还可以监听路由变化。 监听 $route.path属性 watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'...
  • 父组件: <el-main ref="mainBody" class="main-body" v-if="projectChange"> <transition name="fade-transform" mode="out-in"> ... @Watch('$route') routeChange() { this.routerRefresh(); return; }
  • 所以,我们可以监听路由变化,一旦路由变了,我们就重新调用接口。 当我们把ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。 watch: { '$route.params.id' () { let _refs = ...
  • 本篇文章主要介绍了vue使用watch 观察路由变化,重新获取内容 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • watch监听路由、数据变化

    千次阅读 2018-09-05 15:59:28
    1、watch监听路由变化 watch: { $route (to, from) { if (from.fullPath === '/Organize/attendPer') { Object.assign(this.canteenDetailAdd[from.params.id].flowInstanceStepApproveAdd, this.atten...
  • vue利用watch监听路由变化

    千次阅读 2018-10-18 11:08:49
    watch:{ '$route.path':function (newVal,oldVal) { console.log(newVal+'==='+oldVal); if (newVal == '/login') { console.log('欢迎进入登录页面') } else if (newVal == '/register...
  • watch监听路由变化

    2019-07-10 08:48:45
    watch: { $route(to, from) { if (to.meta.keepAlive) { !this.include.includes(to.name) && this.include.push(to.name); } //再根据 deepth 来判断是前进还是后退 if (from.meta.keepAlive && to.meta....
  • 什么是路由参数的变化 ...监测路由参数变化的方法(watch监听|导航守卫) 方法一watch监听: watch: { // watch的第一种写法 $route (to, from) { console.log(to) console.log(from) } }, wa...
  • export default{ data(){ ..."$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$rount.path; //或得当前路径 进行逻辑判断 } } } 转载于:https://www.cnblogs....
  • 1.例如一些帖子详情页面中有其他... watch: { $route: "getPath", }, methods: { getPath() { this.id = this.$route.query.id; this.getDetail(); this.getArticlesList(); this.getDis(); this.makeCode();
  • "$route.params.id"(){ // 监听路由变化 // 组件第一次进入不会执行 console.log("id 变化了",this.$route.params.id) }, "$route.params.id":{ immediate:true, // 一开始的数据也要当做一种变化 handler...
  • 主要介绍了小程序使用watch监听数据变化的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 一个组件内写了个编程路由,通过交互触发 this.$router.push({ name: "Result", query: { ...在接收参数的路由组件中watchwatch: { // 监视搜索词变化 "$route.query.title": { immediate: true,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,735
精华内容 5,894
关键字:

watch监听路由变化