$router怎么获取当前激活的菜单
时间: 2023-08-09 16:01:25 浏览: 52
在Vue.js中,$router对象是Vue Router的实例,它包含了导航相关的方法和属性。要获取当前激活的菜单,可以通过$router的currentRoute属性来实现。
首先,在Vue组件中使用$router属性,可以通过this.$router来访问$router对象。而要获取当前激活的菜单,可以通过访问$router.currentRoute属性。
$router.currentRoute属性是一个响应式对象,它包含了当前路由的信息,包括路径、查询参数和路由参数等。其中,$router.currentRoute.path表示当前路由的路径。
通过判断$router.currentRoute.path和菜单的路径是否匹配,就可以确定当前激活的菜单了。例如,可以在created或mounted生命周期钩子函数中使用if语句来判断当前路由是否激活菜单。如果匹配,则可以对菜单进行相应的样式变化或其他操作。
以下是一个简单的示例代码:
```javascript
export default {
// ...
created() {
const activeMenu = '/menu1'; // 激活菜单的路径
if (this.$router.currentRoute.path === activeMenu) {
// 当前路由与激活菜单匹配,进行相应操作
// 例如修改菜单样式、添加激活状态等
}
}
// ...
}
```
简而言之,通过访问$router对象的currentRoute属性,可以获取当前激活的菜单路径,以便对其进行相应的处理与操作。