仅当 Vue Router 子路由被命中时才触发 API 调用

Question

我正在使用 Vue2 和 vue router 3x。每当点击特定的子路由时，无论是通过按钮按下还是浏览器后退/前进按钮点击，如何执行存储操作？

每当点击特定的 child 路线时，我需要触发 API 调用。目前，代码工作正常，但是，当用户按下浏览器后退/前进按钮时，代码就会崩溃。

这是问题的细分...

我的路由器设置方式如下：

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/browse/food/:foodId',
      name: 'Food',
      component: foodComp,,
      children: [
        {
          path: ':routeTitle',
          name: 'FoodDescription',
          component: foodDescriptionComp,
          props: {
            viewMode: 'TEXT',
          },
        },
        {
          path: ':routeTitle',
          name: 'FoodImage',
          component: foodDescriptionComp,
          props: {
            viewMode: 'IMAGE',
          },
        },
        {
          path: ':routeTitle/food-translation',
          name: 'FoodTranslation',
          component: foodTranslationComp,
        },
      ],
    },
    ...lotsOfOtherRoutes,
  ],
});

...

foodDescriptionComp

内置分页功能，可以在不同的食物之间翻转，点击“下一页”（或页码）按钮即可触发，

method

的设置如下：

methods: {
  switchPage(pageNumber, foodIdForPageSelection) {
    this.$router.push({
      name: 'FoodDescription',
      params: { foodId: foodIdForPageSelection },
    });

    await this.loadFoodByPage({
      catalogId: this.catalogId,
      pageNumber,
    });
  }
}

如您所见，页面路由器将更新路由，然后作为一个单独的操作，我调用

loadFoodByPage

。如上所述，这很好用，但如果用户尝试使用浏览器后退按钮，则永远不会调用

loadFoodByPage

。

我尝试了一些方法来解决这个问题：

我尝试添加

beforeEnter

并将

loadFoodByPage

移动到

beforeEnter

，但是，这只在初始页面加载时命中。

我相信使用

beforeEach

会起作用，但我们的应用程序中有数百条路由，为这个将在每个页面上检查的特定子路由添加逻辑似乎很愚蠢。

我已经尝试过变得非常hacky，但是下面的这个解决方案不起作用，因为它只维护一按回的历史记录 - 例如，如果我从登录页面然后重定向到食物1，然后转到2、3， 4，我按浏览器中的后退按钮，它将返回并加载页面 3，然后我再次按后退，它会转到登录页面。即使这种方法确实有效，但感觉非常反模式。

// Back/Forward browser button pressed
window.onpopstate = function () {
  window.location.reload();
};

Answer 1

我认为你可以在

watch

上添加一个

this.$route.name

，然后根据路线名称，调用你的API