如何僅在一個路由器鏈接中使用組件

所以我有一個 SPA，其中有多個 routerlinks 鏈接到多個 vue 組件。我正在嘗試將帶有道具的組件鏈接到這些“頁面”中的一個。我該怎么做呢？提前致謝。

這是我的主要 vue 頁面，我將所有路由器鏈接連接在一起。

    <script>
import Footer from "./components/Footer.vue";
import Counter from "./components/Counter.vue";

export default {
  components: {
    Footer,
    Counter,
  },
};
</script>

<template>
  <header class="Header">Welcome to my app</header>

  <nav>
    <RouterLink
      style="text-decoration: none; color: inherit; padding-right: 20px"
      to="/"
    >
      Home
    </RouterLink>
    <RouterLink
      style="text-decoration: none; color: inherit; padding-left: 20px"
      to="/about"
    >
      About
    </RouterLink>

    <RouterLink
      style="text-decoration: none; color: inherit; padding-left: 20px"
      to="/Dice"
    >
      Dice
    </RouterLink>

    <RouterLink
      style="text-decoration: none; color: inherit; padding-left: 20px"
      to="/FAQ"
    >
      FAQ
    </RouterLink>
    <RouterLink
      style="text-decoration: none; color: inherit; padding-left: 20px"
      to="/Calculator"
    >
      Calculator
    </RouterLink>
    <RouterLink
      style="text-decoration: none; color: inherit; padding-left: 20px"
      to="/Clock"
    >
      Clock
    </RouterLink>
    <RouterLink
      style="text-decoration: none; color: inherit; padding-left: 20px"
      to="/Counters"
    >
      Counters
    </RouterLink>
  </nav>

  <main>
    <RouterView></RouterView>
  </main>
  <Footer :copyrightYear="2022"></Footer>
</template>

<style scoped>
nav {
  background-color: rgb(63, 63, 63);
}

.Header {
  color: rgb(0, 0, 66);
  text-align: center;
  font-size: 50px;
}
nav {
  text-align: center;
  font-size: 30px;
}
</style>

我想在“計數器”頁面中添加一個組件，如下所示：

      <Counter :startValue="0" :incValue="1"></Counter>
  <Counter :startValue="45" :incValue="5"></Counter>
  <Counter :startValue="33" :incValue="10"></Counter>

該組件看起來像這樣：

<script>
export default {
  props: {
    startValue: Number,
    incValue: Number,
  },

  methods: {
    increment(a, b) {
      a = a   b;
      console.log(a);
      return a;
    },
  },
};
</script>

<template>
  <button @click="increment(startValue, incValue)">
    {{ startValue }}
  </button>
</template>

<style scoped>
button {
  font-size: 20px;
}
</style>

我想將此組件添加到我的 Counters.vue 頁面：

<script>
export default {
  components: {},
};
</script>

<template>
  <div class="page">
    <h1>Let's count!</h1>
    <Counter :startValue="0" :incValue="1"></Counter>
    <Counter :startValue="45" :incValue="5"></Counter>
    <Counter :startValue="33" :incValue="10"></Counter>
  </div>
</template>

<style scoped>
.page {
  background-color: rgb(251, 255, 0);
  text-align: center;
}
button {
  font-size: 20px;
  padding: 1px;
  margin: 10px;
}
</style>

但是將 'import' 或 'components:' 行添加到 'Counters.vue' 頁面會完全轟炸該網站。但它在主 vue 檔案上運行良好。如何將組件成功鏈接到 Counters.vue？

uj5u.com熱心網友回復：

您必須直接在您使用它的頁面中匯入您的組件，而不是在 App.vue

CounterView.vue

<script>
import Counter from "./components/Counter.vue";
export default {
  components: {
   Counter,
},
};
</script>

<template>
  <div class="page">
    <h1>Let's count!</h1>
    <Counter :startValue="0" :incValue="1"></Counter>
    <Counter :startValue="45" :incValue="5"></Counter>
    <Counter :startValue="33" :incValue="10"></Counter>
  </div>
</template>

<style scoped>
.page {
  background-color: rgb(251, 255, 0);
  text-align: center;
}
button {
  font-size: 20px;
  padding: 1px;
  margin: 10px;
}
</style>

另外我建議您在組件和頁面之間使用不同的名稱以避免沖突，例如：

• Counter.vue對于組件
• CounterView.vue對于頁面

標籤：javascript Vue.js

上一篇：動態類系結在Vue中不起作用

下一篇：使用包含斜杠的id插入到elasticsearch