VueJS监听路由变化的实现

VUE项目中，可能需要用到监听路由变化的场景，例如：在Header组件中，需要根据当前的路由，来动态改成Header中的图片或者其他内容。

我们知道vue中使用watch来监听data内容的变化，要如何监听route的变化呢？代码如下

watch: {
    $route (newRoute) {
        var path = newRoute.path;
        if(path === '/login') {
            this.backgroundImg = require('../assets/home_bg2.jpg');
        } else {
            this.backgroundImg = require('../assets/home_bg.jpg');
        }
        console.log('newRoute changed',newRoute)
    }
}

示例中，通过监听$route，获得newRoute的path，来实现动态修改data中的backgroundImg背景图片。