在 Vue.js 中根据 URL 显示条件标题 - Javascript

在 Vue.js 中，你可以根据 URL 条件来展示不同的内容。这个功能通常用于显示不同的页面标题，以及在不同页面上切换不同的样式。

下面是一个简单的实现示例：

<template>
  <div>
    <h1 v-if="isHome">Home</h1>
    <h1 v-else-if="isContact">Contact</h1>
    <h1 v-else>About</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHome: false,
      isContact: false
    };
  },
  mounted() {
    this.setCurrentPage();
  },
  methods: {
    setCurrentPage() {
      const currentUrl = window.location.pathname;
      if (currentUrl === '/') {
        this.isHome = true;
      } else if (currentUrl === '/contact') {
        this.isContact = true;
      }
    }
  }
};
</script>

在上面的示例中，我们首先在 data 方法中定义了两个条件变量 isHome 和 isContact。然后在 mounted 生命周期中，我们通过调用 setCurrentPage 方法来设置当前页面的条件变量。

在 setCurrentPage 方法中，我们使用了 window.location.pathname 来获取当前 URL 的路径。根据这个路径，我们来判断当前页面应该显示哪个条件变量。

最后，在模板中，我们使用了 v-if 来根据条件变量来展示不同的标题。

总的来说，这个功能可以让你更灵活地根据 URL 条件来展示视图内容。