Vue中路由变化、父传子的变量为空

问题一：

在vue中，父组件传递给子组件的数据，我们在挂载后打印它，会得到一个空的值也有可能报错（未定义），但是我们却可以直接渲染到页面上。

那么这是什么原因呢？

刚开始组件挂载，数据并没有从父组件传递过来，所以mounted打印不出来

之所也页面能渲染，因为vue是数据驱动，当数据实时变更后，页面发生diff算法，会更新视图，所以才可以渲染

那么我们想在mounted或其他地方使用它，进行一些逻辑，需要怎么办呢？

我们可以通过watch监听它的变化。

解决方案：

export default {
    name: "JobDataTable",
    props:["Data"],
    watch:{
        Data (val, oldVal) {
            if (val !== oldVal) {
                // 写你需要处理的逻辑
            }
        }
    }
}

prop中的Data是我们接收到的父组件发送过来的数据，我们可以监听它的变化，当它从原本的空值变为有数据的值时，我们就可以进行一些操作。（val是新的值，即现在的值，oldVal是变化前的旧值）

问题二：

我们时常需要通过路由传参实现跳转页面并传递某个参数过去。

但是假设我们有个全局搜索框，我们通过搜索把当前搜索值作为参数跳转到某个页面，已经跳到这个页面了，我们再使用全局的搜索框，这是页面肯定不跳转了（已经处在同一个界面了），只是参数会发生相应的改变，这是我们就需要去监听参数的变化

解决方案：

'$route.query': function (newVal, oldVal) {
      // 当参数变化时，处理对应的逻辑             
}

附加（路由变化）

'$route.path': function (newVal, oldVal) {
      // 当路由变化时，处理对应的逻辑             
}

问题三：

特殊需求：我们已经通过路由传参跳转到对应的页面，并把当前参数传递过去了，那么我们人为想改变这个参数怎么办？

解决方案：

this.$router.push({
    query: {
        "Id": ""
    }
});

id是你要改变的参数值，后面的是你要赋予的值，这里我把它置为空。

好了，以上就是vue中一些数据变更，我们需要去实时监听的解决办法，希望对大家有帮助。

如有问题，请指出，接受批评。