Vue监听页面变化的实现方法小结

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 创建一个Vue实例来管理路由变化
new Vue({
  router,
  created() {
    this.$router.beforeEach((to, from, next) => {
      console.log('路由变化前：', to.path);
      next();
    });
    this.$router.afterEach((to, from) => {
      console.log('路由变化后：', to.path);
    });
  }
}).$mount('#app')

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message changed from ' + oldValue + ' to ' + newValue);
    }
  }
}

export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('Component has been created');
  },
  updated() {
    console.log('Component has been updated');
  }
}

export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('User object changed:', newValue, oldValue);
      },
      deep: true // 深度监听
    }
  }
}

export default {
  data() {
    return {
      routeParam: ''
    }
  },
  watch: {
    '$route.params.id': function(newId) {
      this.routeParam = newId;
      console.log('Route parameter id has changed to:', newId);
    }
  },
  created() {
    this.$watch(() => this.$route.params.id, (newId) => {
      this.routeParam = newId;
    }, { immediate: true })
  }
}