摘要：分析：在app中，每个组件都有一个._routerRoot的字段，它指向拥有router实例的那个Vue实例，一般我们都在new Vue({router})中定义，
本篇要解决的问题：用户点击路由菜单时，我怎么得到提醒？
完整的调试代码在后面，可以提前运行一下看结果，然后配合文章就知道说什么了。
如图所示，这是一个典型的后台系统，当点击左边菜单时，我们希望能在tab栏中添加一个tab项，那么怎么知道用户点击了呢？
方法一：使用click事件。
可行，但不是个好的方法，因为左侧菜单项是通过渲染出来的，绑定click比较麻烦。
方法二：监控$route
$route表示当前路由，如果它变化了能通知我们，那么我们就可以拿到$route对象，进而做tab的相关处理。这个方法很巧妙。
在监控$route之前，我们需要先了解下$route和$router在app中的架构，如下：
分析：在app中，每个组件都有一个._routerRoot的字段，它指向拥有router实例的那个Vue实例，一般我们都在new Vue({router})中定义，
也就是在根实例中注入，那么._routerRoot就等于根实例vm。
//根实例，也即._routerRootnew Vue({router})在router注入之后，根实例就创建一个属性._router引用options中的router。
最后在vue-router中再定义如下：
Object.defineProperty(Vue.prototype, '$router', {get: function get { return this._routerRoot._router }});Object.defineProperty(Vue.prototype, '$route', {get: function get { return this._routerRoot._route }});分析：在构造函数Vue的prototype中添加$router和$route两个字段，那么每个组件实例都可以引用。
在每个组件中，引用$router就是引用._routerRoot的_router，也就是共同引用根实例中的那个router，因此结论是：整个app中就只有一个router实例，所有的组件都是通过引用的方式来使用它，$route也是一样。
搞清楚了$router和$route的架构，我们就可以设计代码。
Vue Router 简单示例const routes = [{path: '/router-1.html',redirect:'/home'},{path:'/home',component:{template:`模拟菜单项
用户管理系统设置内容展示区
`,watch:{$route{alert('路由变化了！！！'+this.$route.path)}}},children:[{path:'user',component: {template:'用户管理
'}},{path:'system',component: {template:'系统设置页！！
'}}]}]const router = new VueRouter({routes,mode: 'history',base: '/test-rsa/cmd/vue/router/'})new Vue({router}).$mount('#app')过程：
创建router-1.html文件，然后内部服务器运行。主要在/home组件中加了一个watch监控$route的变化，我们就能接受到这个提醒，然后执行tab创建或其它事情。这里简单的写一下，Watch的本质就是创建一个Watcher，也就是一个观察者。在前面的文章中有提到，它是Vue中的一个核心概念，因为很多功能都直接和它有关。
watcher得到通知后执行我们给它的回调方法。
本篇说明了$router和$route的架构，同时主要说明了用watch监控$route，在用户点击菜单路由时，给了我们事件提醒，在这里就可以创建tab，这一点非常有用！
来源：恋爱脑一点号
