vue-router – 檢查特定子路由的子路由

Question

檢查了有關 stackoverflow 的類似問題，但找不到有效的解決方案。

我想檢查子路由是否是特定路由的子路由以顯示容器（或不是）。

不幸的是，以下方法不起作用：

<div v-if="this.$route.matched.some(route => route.path === '/projects')">
   etc.
</div>

我正在嘗試在www.example.com/projects和www.example.com/projects/foo上顯示div容器

我也嘗試省略this 。

感謝您的任何提示！

Answer 1

您可以使用

<div v-if="this.$route.matched.some(route => route.path.includes('/projects')">
   etc.
</div>

includes() 方法確定數組是否在其條目中包含某個值，根據需要返回 true 或 false，因此www.example.com/projects/foo和www.example.com/projects返回 true

Answer 2

如果我需要在我使用this.$route.path屬性的路徑之一中隱藏一些 div。

<div v-if="this.$route.path === '/projects'">
  Display only on views witch route is /projects
</div>

如果你想在所有包含'/projects'的路徑中隱藏div，你可以用這種方式。

<div v-if="this.$route.path.indexOf('/projects') >= 0">
  Display only on views which contains /projects
</div>

Answer 3

最好的辦法是檢查路線的名稱

['route1', 'subroute1'].indexOf($route.name) >= 0