美文网首页
vue/nuxt 中 通过路由来实现导航高亮

vue/nuxt 中 通过路由来实现导航高亮

作者: xcyzjs | 来源:发表于2020-01-16 16:53 被阅读0次
    1. 首先在 mounted() 中判断了路由, 实现高亮, 后来发现刷新才有用, 直接 router.push 过去的链接则不生效
    2. 监听路由变化, 执行同样的判断
        mounted() {
          this.initHighlight()
        },
        watch: {
          "$route"() {
            this.initHighlight()
          }
        },
        methods: {
          // 导航高亮
          initHighlight() {
            if (this.$route.name == 'route1') {
              this.active_id = -2
            } else if (this.$route.name == 'route2) {
              this.active_id = -1
            } else if (this.$route.name == 'route3') {
              this.active_id = this.$route.params.navid
            } else {
              this.active_id = 0
            }
          }
        }
    
    

    参考自: segmentfault

    相关文章

      网友评论

          本文标题:vue/nuxt 中 通过路由来实现导航高亮

          本文链接:https://www.haomeiwen.com/subject/jmafzctx.html