52. Vue使用watch监听网页的URL变化

需求

上一篇章使用watch组件通过监听文本框的参数变化，实现了名称拼接的案例。这种业务使用事件监听都可以处理，但是如果需要监听网页的URL地址变化，这样事件监听肯定是做不了的。那么此时就可以使用watch来实现了。

那么这个实现的思路该怎么处理呢？

这时候可以监听路由的对象this.$route.path变化来处理。

示例

1.首页编写路由映射登录以及注册两个组件

    
        
        
        
        
        
        
        
    
    

        

            
            登陆
            注册
            
            
            
            
                
            
            
        

        

    

2.浏览器查看效果

image-20200301202218874

image-20200301202245868

可以看到已经实现了点击组件的切换了，那么下面来监听路由this.$route.path的变化。

image-20200301202401276

image-20200301202418451

3.使用watch监听$this.route.path路径变化，根据不同的路由，打印不同的信息

image-20200301204705140

watch: {
                    // 监听路由变化
                    "$route.path": function(newVal, oldVal) {
                        console.log(`new_path = ${newVal}, old_path = ${oldVal}`);
                    }
                }

首先在浏览器查看一下打印的路径信息，如下：

image-20200301204811287

根据上面打印出来的路径，那么我只要做个if判断可以设置不同的路径打印不同的信息了，如下：

image-20200301205039136

那么在浏览器显示打印的信息如下：

image-20200301205103914

image-20200301205119862

那么从效果来看，已经可以根据不同的路径打印对应的信息内容了。

更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：

image

image