使用watch监听route对象的变化

我们在vue项目中，有时候需要监听路由的变化，来做出一些操作，下面就是一些案例。

1、监听路由对象中的meta.title属性，来渲染tabs标签的高亮状态。

        情况说明：①我们在Aside.vue中，有一个菜单组件，点击菜单就能使得当前路由跳转到对应的路径。②我们在index.js文件中，给每个路径的路由都设置了一个meta属性，里面还有title，用来渲染要高亮的tabs标签。③我们在Tabs.js文件中，令tabs组件的activeName为当前路由的meta.title的值。

经过上述几步操作，这样就能实现我们点击的哪个菜单，哪个菜单对应的tab标签就能高亮显示。

但是有一个问题：此时跨页面了，导致路由变化时，不能及时给activeName重新赋值，这样就导致以下情况：

//获取路由
import {useRoute} from 'vue-router'
const route = useRoute();
//让当前菜单的路由，决定哪个tag标签高亮显示（问题所在：不能及时刷新数据）
const activeName = ref(route.meta.title)

        问题解决方案： 使用watch监听route对象的变化。

//获取路由
import {useRoute} from 'vue-router'
const route = useRoute();

//导入watch函数，来监听某个属性，以便在其发生改变时，做出对应操作。
import {watch} from 'vue'

//activeName:控制哪个tab标签高亮显示
const activeName = ref(null)

//定义方法fetchActiveName(),用来给activeName赋值
const fetchActiveName = () => {
  activeName.value = route.meta.title;//令activeName的值为当前路由的meta.title的值
  //alert("页面变化，当前title：" + activeName.value)
}

//组件创建时，初始化数据
fetchActiveName();

//监听路由变化：路由发生变化时，让当前路由对应的tag标签高亮显示
watch(
  () => route.meta.title,//监听的数据：当前路由的meta.title
  () => {
    fetchActiveName();//监听的数据发生变化时，要进行的操作
  }
)

        完善后的效果：

总结：