Question

我一直在做很多VueJS教程，包括router，event bus，并尝试使用fetchival和axios无效。

设置，我希望有两个部分。我有按钮的地方和第二部分将使用html文件中的html数据进行更新，这些数据因按下的按钮而异。

我使用事件总线能够用基本的静态html更新第二个div （即<p>got it</p>）但是，对于我的生活，我不能使用任何请求从其他网站或文件获取HTML并将其加载到div中。

我不一定需要任何人为我建造它，但即使是一些指导和方向也会受到无限的赞赏。

Answer 1

您可以使用vue-router（https://router.vuejs.org/en/）。在第一部分中，路由器链接（https://router.vuejs.org/en/api/router-link.html），您的按钮，在第二部分放置路由器视图（https://router.vuejs.org/en/api/router-view.html）。

Answer 2

根据您的上述评论，我认为您希望改变您的想法来加载html文件＆＃34; to＆＃34;显示Vue组件的不同部分。＆＃34;

这是一个基本的例子。我将使用Vue single-file component syntax，但重构class-based components并不难：

<template>
  <div>
    <button @click="clickedShowFirst">Show First</button>
    <button @click="clickedShowSecond">Show Second</button>
    <div v-if="showingFirst">
      This is the first section!
    </div>
    <div v-else>
      This is the second section!
    </div>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        // We default to showing the first block
        showingFirst: true
      }
    }

    methods: {
      clickedShowFirst: function () {
        this.showingFirst = true
      },

      clickedShowSecond: function () {
        this.showingFirst = false
      }
    }
  }
</script>

当然，您可以自己创建自己导入的每个v-if块组件（如果它们本身很复杂，这是有意义的。）

或者根据Phillipe的建议，您可以使用vue-router并使用不同的网址将每个视图设为不同的页面。

离开你的最后一条建议是，我在学习时发现Jeffrey Way's Laracasts series on Vue.js非常有帮助。他的一集名为＆＃34; Exercise #3: Tabs＆＃34;与你在这里提出的问题非常相似。

使用VueJS将页面数据加载到div的最佳方法

2 个答案: