网站首页 > 技术文章正文

精通Vue(10):vue-router(3)监控$route

nanyue 2025-10-19 10:25:20 技术文章 1 ℃

本篇要解决的问题：用户点击路由菜单时，我怎么得到提醒？

完整的调试代码在后面，可以提前运行一下看结果，然后配合文章就知道说什么了。

监控$route的作用是什么？

如图所示，这是一个典型的后台系统，当点击左边菜单时，我们希望能在tab栏中添加一个tab项，那么怎么知道用户点击了呢？

方法一：使用click事件。

可行，但不是个好的方法，因为左侧菜单项是通过<router-link>渲染出来的，绑定click比较麻烦。

方法二：监控$route

$route表示当前路由，如果它变化了能通知我们，那么我们就可以拿到$route对象，进而做tab的相关处理。这个方法很巧妙。

$route和$router的架构

在监控$route之前，我们需要先了解下$route和$router在app中的架构，如下：

分析：在app中，每个组件都有一个._routerRoot的字段，它指向拥有router实例的那个Vue实例，一般我们都在new Vue({router})中定义，

也就是在根实例中注入，那么._routerRoot就等于根实例vm。

//根实例，也即._routerRoot
new 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的架构，我们就可以设计代码。

完整的实验代码

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Router 简单示例</title>
    <script src="../vue.js"></script>
    <script src="./vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>

    <script>
      const routes = [
        {
          path: '/router-1.html',
          redirect:'/home'
        },
        {
          path:'/home',
          component:{
            template:`
            <div>
                <h2>模拟菜单项</h2>
                <ul style="border:1px solid red">
                    <li><router-link to="/home/user">用户管理</router-link></li>
                    <li><router-link to="/home/system">系统设置</router-link></li>
                </ul>
                <h3>内容展示区</h3>
                <router-view></router-view>
            </div>
                `,
            watch:{
              $route(){
                alert('路由变化了！！！'+this.$route.path)
              }
            }
          },
          children:[
            {
              path:'user',
              component: {
                template:'<h2>用户管理</h2>'
              }
            },
            {
              path:'system',
              component: {
                template:'<h2>系统设置页！！</h2>'
              }
            }
          ]
        }
      ]

      const router = new VueRouter({
        routes,
        mode: 'history',
        base: '/test-rsa/cmd/vue/router/'
      })
      
      new Vue({
        router
      }).$mount('#app')
      
    </script>
  </body>
</html>

过程：

创建router-1.html文件，然后内部服务器运行。
主要在/home组件中加了一个watch监控$route的变化，我们就能接受到这个提醒，然后执行tab创建或其它事情。

Watch是什么？

这里简单的写一下，Watch的本质就是创建一个Watcher，也就是一个观察者。在前面的文章中有提到，它是Vue中的一个核心概念，因为很多功能都直接和它有关。

watcher得到通知后执行我们给它的回调方法。

总结

本篇说明了$router和$route的架构，同时主要说明了用watch监控$route，在用户点击菜单路由时，给了我们事件提醒，在这里就可以创建tab，这一点非常有用！

上一篇：精通Vue(9):vue-router(2)路由嵌套如何实现的
下一篇：深入VRRP 1 Vitual Router Redundancy Protocol

网站首页 > 技术文章 正文