Vue新手求教：如何根据$route.path调用mixin中不同方法？

嘿，作为Vue新手能想到根据路由路径来触发不同方法，这点思路很赞！结合你的需求，我给你整理了几种简单易上手的实现方式，你可以根据自己的习惯选择：

方法一：直观的if-else判断 #

这是最直接的写法，适合逻辑简单的场景：

mounted() {
  const currentPath = this.$route.path;
  // 判断路径是否包含'states'字符串
  if (currentPath.includes('states')) {
    this.statesEvent();
  } 
  // 严格匹配'/search'路径
  else if (currentPath === '/search') {
    this.searchEvent();
  }
}

这种写法一目了然，因为你的两个方法都在mixin里，直接通过this调用就可以啦，完全不用额外处理。

方法二：switch分支判断 #

如果后续可能要添加更多路由路径的判断逻辑，switch写法会更清晰：

mounted() {
  const currentPath = this.$route.path;
  switch(true) {
    case currentPath.includes('states'):
      this.statesEvent();
      break;
    case currentPath === '/search':
      this.searchEvent();
      break;
    // 以后新增路径判断，直接在这里加case即可
  }
}

方法三：对象映射（简洁派首选） #

把路径和对应的方法做映射，代码会更简洁，也方便后续维护：

mounted() {
  // 定义路径与方法的映射关系
  const pathMethodMap = {
    '/search': this.searchEvent,
    // 处理包含'states'的路径
    states: this.statesEvent
  };

  const currentPath = this.$route.path;
  
  // 先检查是否是精确匹配的路径
  if (pathMethodMap[currentPath]) {
    pathMethodMap[currentPath]();
  } 
  // 再检查是否包含'states'关键词
  else if (currentPath.includes('states')) {
    pathMethodMap.states();
  }
}

小提示 #

• 因为你的路径/states/ABC是动态的（比如后面的ABC可能变化），用includes('states')刚好能覆盖所有以states开头的子路径，非常适合你的需求；
• 确保mixin已经正确引入到当前组件中，这样this才能访问到statesEvent()和searchEvent()这两个方法哦。

内容的提问来源于stack exchange，提问作者user6488504