Vue2由面包屑导航引出watch监听路由无效问题

当在写后台管理系统，面包屑导航是一种常见的效果，实现起来也很简单，一般来说都是采用动态获取路由路径的方式。

//对路由进行监听
watch:{
    $route(to,from){
        console.log(to);
    }
}

使用watch监听路由的变化无效，获取不到任何的参数，让你感到困惑，代码写错了？别急，这里来分析下存在的问题。

首先，路由组件的渲染区域为 router-view，将匹配到的路由组件渲染在该区域中，路由组件渲染默认的方式是销毁 - 创建，可以在页面的生命周期中进行测试。

created(){
    console.log("组件被创建");
}

在浏览器打开控制台，并对页面进行前进后退，查看其打印的状态。

由于路由组件的渲染方式，组件实例上定义的方法每创建一次组件new Vue()，方法都是新添加上去的，所以$watch这个操作就监听不到路由的变化。

解决这个问题只需要使用到keep-alive，先说说keep-alive这个组件的基本用法，这个组件的功能只有一个那就是缓存组件，可以让其包裹的组件不销毁，起到一个缓存的作用。

对keep-alive有了解，监听路由的问题就好解决了，只需在keep-alive中包裹路由视图router-view，如下：

<keep-alive>
    <router-view></router-view>
</keep-alive>

这时候再回过去查看你在生命周期created中所打印的，只会执行一次，加上了keep-alive在第一次跳转路由后你定义的生命周期函数 created()将不会再被调用。

此时$watch监听路由能在控制台打印出参数，根据你的需要进行判断等等的操作即可。