VueJS监听路由变化的实现

2022-04-12 534点热度 0人点赞 0条评论

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背景图片。

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论