Vue2.x 根据URL地址为条件控制组件的逻辑的最佳方式——监听$route属性

问题描述

在工作中遇到一个需求：App.vue 有个左侧菜单组件和右侧路由组件，现在需要根据不同的URL，决定是否显示左侧菜单

解决思路

在匹配的URL组件中处理逻辑

解决办法：
在匹配的组件中，mounted方法里通过 document.querySelect 方式查找到对应的节点，然后根据业务场景决定显示或者影藏左侧菜单

问题：
由于布局组件采用inject 和 provide 方式，导致每次页面切换，又会重新计算是否要显示menu 菜单，导致mounted对menu的设置失效

在App.vue 中监听路由的变化

每个组件都可以去监听路由的变化，因为 this.$route 每个对象都会有的，因此在App.vue 中监听该变化，使用v-if 来决定menu是否隐藏或者显示

<template>
  <div id="app" >
    <my-menu v-if="!isShowMenu" />
    <router-view />
  </div>
</template>

<script>
import navList from './nav.config.js'
export default {
  name: 'app',
  watch: {
    $route (val) {
      this.isShowMenu = this.noMenuList.includes(val.matched[0].name)
    }
  },
  data () {
    return {
      isShowMenu: true,
      noMenuList: [
        'MonitorList'
      ]
    }
  }
}
</script>

结论：如果想根据URL地址作为条件控制组件的逻辑，最好的方式是监听$route属性，而不是在其他组件中去修改，更不是通过节点查找的方式强行去改DOM树