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

Question

默认情况下，我有一个标题，可以在所有页面中看到。然后是标题二和标题三，它们仅在打开各自的主页时显示。如果路径是“/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

使用 props、路线观察器、元数据等可以实现此目的的几种方法

这是在每个路由上使用元的示例:

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>