使用vuejs根据各自的主页显示隐藏标题

Question

默认情况下，我有一个标头，可以在所有页面中看到。然后是标题2和标题3，它们仅在打开相应的主页时显示。无论如何，如果路径是'/ home-one'而不是'/ home-two'和'/ home-three'，那么我们可以根据条件进行操作，然后显示header-v1

//App.vue//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
	<v-app>
		<header-v1></header-v1>
    <header-v2></header-v2>
    <header-v3></header-v3>
		<router-view></router-view>
		<emb-footer-V1></emb-footer-V1>
	</v-app>
</template>

Answer 1

您可以使用道具，路线观察器，元数据等多种方式来实现此目的。

下面是在每个路径上使用meta的示例：

Vue.use(VueRouter)

const routes = [{
    path: '/',
    component: {
      template: '<div>home page</div>'
    }
  }, {
    path: '/home-one',
    component: {
      template: '<div>home page one</div>'
    },
    meta: {
      header: 1
    }
  },
  {
    path: '/home-two',
    component: {
      template: '<div>home page two</div>'
    },
    meta: {
      header: 2
    }
  },
  {
    path: '/home-three',
    component: {
      template: '<div>home page three</div>'
    },
    meta: {
      header: 3
    }
  }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1 v-if="$route.meta.header === 1">I'm visible on home page one</h1>
  <h2 v-else-if="$route.meta.header === 2">I'm visible on home page two</h2>
  <h3 v-else-if="$route.meta.header === 3">I'm visible on home page three</h3>
  <p>
    <router-link to="/">Home</router-link>
    <router-link to="/home-one">Home One</router-link>
    <router-link to="/home-two">Home Two</router-link>
    <router-link to="/home-three">Home Three</router-link>
  </p>
  <router-view></router-view>
</div>