在VueJS中，如何根據我的JS中填充的內容在視圖中使用load？

Question

我是Vue.JS的新手，需要一些幫助，因為我堅持一些邏輯。 我已經獲得了一個建設項目，因為我在NDA下，我只能展示比較代碼示例。

在一個使用路由器進入應用程序視口的視圖（Bars）中，我有一個簡單的for循環。

<ul class="bar-listings">
  <li v-for="bar in bars">
      <router-link to="{bar.barPage}">
          <div class="item">
             <div class="item-bd">
                 <h2>{{ bar.barName }}</h2>
             </div>
          </div>
      </router-link>
  </li>
</ul> 

然后在我的JS文件中包含我的所有數據，我有這個（現在只有一個對象）

export default [
  {
    barName: "The Tropicana Bar",
    barPage: "views/bars/Tropicana",
  }
];

標題在Bars上正確顯示，因此循環正確地提取數據。

但是，我將為每個條形圖提供一個.vue文件，該文件也使用我的JS文件中的數據。 見下文：

<template>
    <div class="content-wrapper">
        <h1>{{ getBarByIndex({ bars, index }).barName }}</h1>
    </div>
</template>

<script>
import bars from "./../../data/bars";
export default {
  data() {
    return {
      bars: bars
    };
  },
  methods: {
  getBarByIndex({ bars = [], index = 0 }) {
    return bars[index] || {}
  }
}
};
</script>

所以我需要解決的是如何使<a v-bind:href="">加載此欄的視圖？

Answer 1

我認為你可以做的是在你的組件中有一個子組件，你可以通過在路由器視圖中使用嵌套路由來利用它，另外，你可以將道具作為對象傳遞給路由器組件，父或子，等等你需要。

基本上，您將擁有一個主路由器視圖，但在組件內部，您將擁有另一個呈現子組件的路由器視圖。

請參閱：嵌套路由

請參閱：將道具傳遞給路線組件