vue实现路由监听和参数监听

针对“vue实现路由监听和参数监听”的问题，我提供以下完整攻略。

路由监听

Vue中实现路由监听，我们可以借助Vue-router提供的钩子函数，主要是监听路由的变化。通过路由对象$route的监控，可以获取当前路由相关信息（如：路由路径，路由参数，路由组件等），具体如下：

1.使用官方提供的beforeEach和afterEach全局路由钩子

在路由文件(router.js)中引入Vue-router库，在router.beforeEach和router.afterEach中添加对路由的监控。例如：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', component: Hello },
    { path: '/about/:id', component: About }
  ]
})

//全局前置守卫,路由切换前调用
router.beforeEach((to, from, next) => {
  console.log('开始进入路由，from:', from.fullPath, ' to:', to.fullPath);
  next();
});

//全局后置钩子，路由切换后调用
router.afterEach((to, from) => {
  console.log('路由跳转结束，from:', from.fullPath, ' to:', to.fullPath);
});

示例

<template>
  <div>
    <router-link :to="{path:'/about',query:{id:1}}">1</router-link>
    <router-link :to="{path:'/about',query:{id:2}}">2</router-link>
  </div>
</template>
<script>
  export default {
    name: 'about',
    mounted () {
      this.$router.beforeEach((to, from, next) => {
        console.log('before each');
        next();
      });
      this.$router.afterEach((to, from) => {
        console.log('after each');
      });
    }
  }
</script>

2.使用vue-router自带的watch监听$route对象

如果只需要监听$route对象的变化时，我们可以使用vue-router自带的watch属性进行监听，监控路由的变化。

<script>
  export default {
    name: 'demo',
    watch: {
      '$route': function(to, from) {
        console.log('route path change', to.path, '\nquery:', to.query, '\nhash:', to.hash);
      }
    }
  }
</script>

参数监听

监听参数值的变化即可。我们可以借助Vue自带的watch优化这个过程。例如：

<template>
  <div>
    <input v-model="msg">
    <input v-model="subMsg">
  </div>
</template>
<script>
  export default {
    name: 'about',
    data () {
      return {
        msg: '',
        subMsg: ''
      }
    },
    watch: {
      msg (newVal, oldVal) {
        console.log(newVal);
      },
     subMsg (newVal, oldVal) {
        console.log(newVal);
      }
    }
  }
  </script>

当HTML input的值发生变化时，watch可以自动监测到，然后执行相应的函数。需要注意的是，我们定义在data中的字段也一定要先初始化，否则watch函数会直接抛出异常，无法执行到。

以上，就是关于“vue实现路由监听和参数监听”的完整攻略了。