根据路由前缀渲染数据

Question

VueRouter中是否有一种方法可以确定路由前缀...

例如，我有一个导航组件，仅当路线以开头时，我才希望呈现一些与用户相关的链接

  

/用户设置/

例如

  

/用户设置/付款   / user-settings / profile

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

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

Answer 1

我将使用计算属性来告诉我当前路径的路径是否包含在“ 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);