vue公共组件的某部分通过路由的改变显示与隐藏，组件内路由守卫的使用控制两个专属路由之间的数据交互

组件内路由守卫的使用控制两个专属路由之间的数据交互：

data() {
    return {
      tableData: [],
      currentRow: null,
      currentTime: "",
      loadTime: ""
    };
  },
  beforeRouteEnter: (to, from, next) => {
    if(from.path === "/eve" && to.path === "/ip"){
      next(vm=>{
        var ipCurrentData = sessionStorage.getItem("ipData");
        vm.tableData = JSON.parse(ipCurrentData);
      });
    }else{
      next()
    }
  },

我在这里是控制ip跟事件两个路由之间的数据交互，只有从事件跳转ip时才会有数据显示，其余页面跳转到ip页面都会显示暂无数据。具体的路由守卫参数以及使用请看vue官方文档，上述代码：
当只有从路由名称为/eve的组件跳转到路由名称为/ip的组件时，改变element-ui表格的数据。

vue公共组件的某部分通过路由的改变显示与隐藏：

data() {
    return {
      value1: "",
      show:true
    };
  },
  watch: {
    $route(to, from) {
      if(to.path === "/shop"){
        this.show = true;
      }else{
        this.show = false;
      }
    }
  },

为了更方便的管理多个路由组件，我将监听属性watch放置在了公共组件内，然后通过数据的true和false来控制某部分的显示与隐藏。
对照上图可以看到这块的查询按钮被隐藏了。