vue页面头部的导航栏目怎么动态加上当前页的标记背景色啊？

Question

头部的导航是公共的。。
比如有 电影、音乐、社区、体育

我跳转到音乐 那么音乐的样式背景就红色
但是注意，音乐下面的所有页面 比如 打开音乐的详情页 、 音乐的列表页 ，导航栏上面的音乐链接都要设置样式当前红色。

要怎么实现啊？

Answer 1

某一个路由

 {
    path: '/index',
    name: '首页',
    label: '首页',
    component: () => import('@components/Home.vue'),
    meta: {
      color: 'red'
    }
  }

实例化vue

new Vue({
  name: 'demo',
  router,
  store,
  render: h => h(App),
  beforeMount () {
    router.beforeResolve((to, from, next) => {
      var color = to.meta.color;// 当然可以在路由配置中配置其他参数
      next()
    })
  }
}).$mount('#app')

Answer 2

写一个公共维护的样式咯。
头部导航肯定是一个组件吧，在组件data声明字段，判断当前属于哪个模块，将页面需要更改颜色的地方，配置当前颜色，比如：

        moduleStyle:{
          'movie':'redBg',
          'music':'greeBg'
        }

Answer 3

假如你是用vue-router进行路由管理的,
定义一个当前选中的参数，例如 selectedRouteName = '',
子菜单的meta里面定义一个， parentName = {父菜单的name}.

然后判断就这样：
菜单就是 selectedRouteName === item.name , 就选中
子菜单就 selectedRouteName === item.meta.parentName, 就选中。

得考虑页面刷新后selectedRouteName 就被重置了。
所以我们在watch里面监听$route.path, 如果path有变动，就将selectedRouteName === $route.name || $route.meta.parentName

Answer 4

定义一个全局颜色map表，选择导航项时，存储一个全局变量（这个是map表的key），然后页面背景色使用map[key]来定义。