Question

我正在学习Vue，我有一个问题，您可能会发现这很琐碎，但我很难找到答案。首先，我将Vue与Vue Router结合使用，以建立测试博客。

假设我的页面的h1位于标题组件内部，而标题组件本身也包含在布局中。

但是，然后，我如何为每个页面设置此h1标签的内容，因为它属于仅包含在布局中的标题？我发现的一种解决方案是在每个路由声明中设置meta.h1，类似这样：

{
    path: 'articles',
    meta: {
        h1: 'All the articles'
    }
}

然后，在标题内，我可以使用一种方法来获取this.$route.meta.h1的值。像这样：

methods: {
    h1() {
        return this.$route.meta.h1
    }
}

它可以工作，但是似乎有点不对劲，因为我认为这不是路由文件的工作。简单地说，处理这种情况的最佳方法是首选方法？ ty：）

[编辑]

这是引导文档中的一个简单示例页面，可以很好地说明我的问题：https://getbootstrap.com/docs/4.0/examples/blog/

精选博客文章的标题

是h1，可能是动态的，在页面之间变化。但这是标题部分的一部分，而不是文章，论坛，评论或其他任何部分的一部分……因此，如果我可以重新表述我的问题，那将是“如何优雅地设置此h1标题”？不要想复杂的事情，这是一个从初学者到一些答案的非常基本的问题：p

Answer 1

您可以传递props via routes like this，但是我不确定如何提供该变量。

我不确定您的应用程序的结构，不确定header组件是整个应用程序的标题，还是只是每篇文章的标题。文章，不需要发出事件。.（请参见下面的示例）。

[CodePen mirror]

const appHeader = {
  template: "#app-header",
  computed: {
    dynamicHeader() {
      let r = this.$route.name;
      // caps first letter
      let f = r.charAt(0).toUpperCase() + r.slice(1);
      switch(f){
        case "Home": return f + " Page!";
        case "Contacts": return "Contact Us!";
        case "About": return f + " Us!!"
      }
    }
  }
};

const contactsPage = {
  template: "#contacts-page"
};

const aboutPage = {
  template: "#about-page"
};

const homePage = {
  template: "#home-page"
};

const routes = [
  {
    path: "/",
    name: "home",
    components: {
      header: appHeader,
      content: homePage
    }
  },
  {
    path: "/contact",
    name: "contacts",
    components: {
      header: appHeader,
      content: contactsPage
    }
  },
  {
    path: "/about",
    name: "about",
    components: {
      header: appHeader,
      content: aboutPage
    }
  }
];

const router = new VueRouter({ routes });

new Vue({
  router
}).$mount("#app");

nav.mainNav > * {
	 padding: 0 0.75rem;
	 text-decoration: none;
}
 nav.mainNav > *:nth-last-child(n+2) {
	 border-right: 1px solid #aaa;
}
 #headerContainer {
	 background-color: yellow;
	 margin-bottom: -20px;
}
 #page {
	 border: 1px solid black;
	 margin: 20px 20px 20px 20px;
}
 #page > * {
	 margin: 10px 10px 10px 10px;
	 text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.4/vue-router.min.js"></script>
<div id="app">
  <div>
    <router-view name="header"></router-view>
    <router-view id="page" name="content"></router-view>
  </div>
</div>

<!-- -------------------- -->
<!-- APP HEADER COMPONENT -->
<!-- -------------------- -->
<script type="text/x-template" id="app-header">
  <div>
    <div id="headerContainer">
      <h1>{{ dynamicHeader }}</h1>
    </div>
    <nav class="mainNav">
      <router-link 
        :to="{ name: 'home' }"
      >Home</router-link>
      <router-link 
        :to="{ name: 'about' }"
      >About</router-link>
      <router-link 
        :to="{ name: 'contacts' }"
      >Contacts</router-link>
    </nav>
  </div>
</script>
<!-- -------------------- -->

<!-- ----------------------- -->
<!-- CONTACTS PAGE COMPONENT -->
<!-- ----------------------- -->
<script type="text/x-template" id="contacts-page">
  <div style="background-color:blue;">
    <h2>this is the contacts page</h2>
  </div>
</script>
<!-- ----------------------- -->

<!-- -------------------- -->
<!-- ABOUT PAGE COMPONENT -->
<!-- -------------------- -->
<script type="text/x-template" id="about-page">
  <div style="background-color:green;">
    <h2>this is the about page</h2>
  </div>
</script>
<!-- -------------------- -->

<!-- ------------------- -->
<!-- HOME PAGE COMPONENT -->
<!-- ------------------- -->
<script type="text/x-template" id="home-page">
  <div style="background-color:red;">
    <h2>this is the home page</h2>
  </div>
</script>

Answer 2

我找到了一种似乎更符合我要求的解决方案，该解决方案使用了视频中所述的事件总线：

https://www.youtube.com/watch?v=jzh4zQcfB0o

总结一下这个人所说的话，想法是使用Vue的另一个实例作为事件总线，以便在彼此不相关的组件之间发出和监听事件。这样，我可以从任何组件设置页面的h1标题。

如何在其他组件中正确设置h1？

2 个答案: