Vue Nuxt 组件未被调用却全局运行 如何限定其仅在指定页面执行

你现在遇到的全页面组件执行问题，本质是组件被挂载到了全局通用的渲染位置，仅靠路由变化的监听没有加执行权限的判断逻辑，按下面两种方式改就行，不用推翻已经写好的watch逻辑：

方式一：基于现有watch逻辑加白名单校验（改动量最小，适合不想大改路由结构的场景） #

你已经写了路由变化的监听逻辑，只需要在这个监听里加两层控制，就能把组件的执行范围锁死在目标页面：

• 第一步：维护一个固定的目标路由白名单，把你红框标注的需要触发该组件的路由全部录入。如果是带动态参数的路由（比如商品详情/goods/123这类路径会变的页面），不要匹配路径字符串，直接匹配路由配置里固定的name值，避免漏判。
• 第二步：模板里把这个组件用条件渲染控制，只有路由匹配到白名单的时候才渲染组件，不匹配就直接卸载；同时在监听回调里加判断，只有匹配白名单的时候才执行组件内部的初始化逻辑，不匹配的时候主动清掉组件绑定的全局事件、定时器这类副作用，避免逻辑残留。
  参考代码结构：

  // 你原来写的$route监听逻辑基础上修改
  watch: {
    $route: {
      immediate: true, // 加上这个配置，保证首次进入页面也会触发判断，解决首次加载漏检的问题
      handler(to) {
        // 录入需要触发组件的路由name（比匹配path更稳定）
        const allowRouteNames = ['HomeIndex', 'GoodsList', 'CategoryPage']
        // 校验当前路由是否在白名单内
        const isTargetPage = allowRouteNames.includes(to.name)
        // 控制组件是否渲染的变量
        this.isHomeWidgetVisible = isTargetPage
        if (isTargetPage) {
          // 只有目标页才执行组件原有的初始化逻辑
          this.initHomeWidgetLogic()
        } else {
          // 非目标页主动清理组件残留的全局事件、定时器
          this.clearHomeWidgetSideEffect()
        }
      }
    }
  }
  

  模板层对应调整：

  <!-- 原来全局直接渲染的Home组件，加v-if控制 -->
  <HomeWidget v-if="isHomeWidgetVisible" />
  

方式二：调整组件挂载位置（更严谨，适合长期维护的项目） #

如果不想保留全局路由的watch逻辑，直接把组件从全局位置移出来，从根源上避免非目标页加载组件：

• 先把之前挂在App.vue全局区域、或者根路由通用布局里的Home组件删掉，这类挂载方式会让所有走该布局的路由页都加载这个组件，自然会全页面执行。
• 直接在路由配置里，把这个组件作为对应目标路由的专属子组件引入，只有访问目标路由的时候，框架才会加载和执行这个组件的逻辑，非目标路由完全不会引入该组件的代码，自然不会触发执行。
  参考路由配置结构：

  const routes = [
    // 非目标路由，完全不引入Home组件
    {
      path: '/login',
      component: () => import('@/pages/Login.vue')
    },
    // 目标路由，专属引入Home组件
    {
      path: '/home',
      components: {
        default: () => import('@/pages/Home.vue'),
        // 在这里把Home组件注册成该路由的专属组件
        homeWidget: HomeWidget
      }
    }
  ]
  

常见踩坑提醒：如果你的目标路由是嵌套路由，一定要注意组件的注册层级，不要把组件注册到嵌套路由的最外层父级，不然父级下的所有子路由还是会加载这个组件。

内容的提问来源于stack exchange，提问作者Andres Miguel Campos