Vue中如何访问路由对象的isActive属性？

我有一个响应式属性isChecked，点击复选框时，选中状态会变为true，未选中则变为false。

当我尝试访问isActive属性时，编写了如下代码：

methods:{
  getChecked(){
    console.log(this.$route)
    //当我执行console.log(this.$route.isActive)时，结果为undefined。
  },
}

控制台中并未显示isActive属性：

如您所见，isActive并不存在于$route对象中。我希望能访问isActive属性以获取其true或false的状态，请问有什么方法可以实现？感谢解答。

嘿，我来帮你搞定这个问题～

首先得搞清楚：isActive并不是$route的直接属性，它是属于**路由记录（route record）**的字段，藏在$route的matched数组里呢。你截图里看到的那个isActive，就是matched数组中某一项路由记录的属性。

给你两种可行的获取方式：

1. 获取当前精确匹配的路由记录的isActive #

如果你的路由没有嵌套，或者只需要最精确匹配的那个路由的活跃状态，直接取matched数组的第一项就行：

methods:{
  getChecked(){
    // 用可选链操作符避免matched为空时出错
    const isActive = this.$route.matched[0]?.isActive;
    console.log(isActive);
  },
}

2. 针对嵌套路由，获取指定路由记录的isActive #

如果你的路由有嵌套结构，想要找到某个特定路由的活跃状态，可以通过路由的name或者path来筛选：

methods:{
  getChecked(){
    // 替换成你目标路由的name
    const targetRecord = this.$route.matched.find(record => record.name === 'YourTargetRouteName');
    const isActive = targetRecord?.isActive;
    console.log(isActive);
  },
}

简单解释下：isActive的作用就是标记该路由记录是否处于活跃状态，当路由匹配成功时它会变成true，不匹配则为false，完全符合你想要获取状态的需求哦～

内容的提问来源于stack exchange，提问作者user6632933