Vue2中解决页面刷新和按钮跳转导致导航栏样式失效的问题

为了确保导航栏的 active 样式在页面刷新或内部按钮跳转时不会失效，我们可以通过在路由配置中添加 meta 字段来实现这一目标。

例如，在 router.js 文件中，我们可以为每个路由对象添加一个 meta 属性：

// router.js
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { active: 'home' }
  },
  // 其他路由配置
];

这样做的目的是为了让每个路由都有一个唯一的标识符，用于后续的样式控制。

接下来，在 HTML 模板中，我们需要根据当前路由的 meta 属性来动态绑定类名。假设我们有一个包含多个导航项的列表：

  
      :class="{'active': $route.meta.active === item.NickName}">
    {{ item.label }}
  

在这个例子中，navItems 是一个包含所有导航项的数据数组，每个导航项都有一个 NickName 属性，用于与路由的 meta.active 进行匹配。

通过这种方式，我们可以在不使用额外的点击事件的情况下，确保导航栏的 active 样式始终正确显示，无论用户是通过页面内的按钮跳转还是刷新页面。