根据路由前缀渲染数据

Question

VueRouter 有没有办法确定路由前缀...

例如，我有一个导航组件，仅当路线以

开头时，我想在该组件上呈现一些与用户相关的链接

/user-settings/

例如

/user-settings/payment /user-settings/profile

如果用户设置前缀不在路线上，它将呈现标准导航链接。我知道我必须在导航组件上使用 v-if 和 v-else，但不确定如何确定路由是否具有用户设置前缀。

当然，这可能完全是错误的处理方式，所以完全接受建议！

Answer 1

我会使用计算的属性来告诉我当前路线的路径是否包含 "user-settings"，以便在我看来与 v-if="is_user_settings".

一起使用

computed: {
  is_user_settings() {
    return this.$route.path.includes('/user-settings/')
  }
}

如果你想要更干净的东西，你也可以利用 $route 对象的 "matched" property。

Answer 2

您可以使用正则表达式来测试路径名。

(/^\/user-settings/i).test(this.$route.path);

Rendering data based on route prefix