vue监听路由--案例详解

有时我们需要对路由的变化进行监听，比如官网展示所有课程的页面：

当页面头部的标签切换时，路径也会发生变化，我们需要监听路由变化来改变标签的样式，或者在页面中加载对应的内容。

那么怎么监听路由呢？

监听路由 $route 的变化

监听路由变化我们需要用到两个知识：vue 中的 watch 和 $route。

watch 即数据变化监听，$route 即当前路由。

路由监听写法如下：

watch: {
   
  $route(to,from){
   
    console.log(to, from);
  }
}

// 或者
watch: {
   
  $route: {
   
    handler: function(to,from) {
   
      console.log(to,from);
    },
    // 深度观察监听
    deep: true
  }
},

to 是变化后的路由，from 是变化前的路由。一般我们用第一种写法就可以了。

监听路由的使用

现在来实现上面 gif 的例子，根据路径参数定位点击的标签：
1. 基础样式
tab 的样式分两种，被点击的和未被点击的：

被点击的 tab 会多个类名 “active”。

<template>
  <div>
    <ul class="tabs">
      <li
        v-for="(tab, index) in tabList"
        :key="index"