How to use a component in only one router link-CodePudding

So I have a SPA with multiple routerlinks linking to multiple vue components. I am trying to link a component with props to only one of those "pages". How should I go about doing that? Thanks in advance.

This is my main vue page where I connect all my routerlinks together.

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

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

<template>
  <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>

And I would like to add a component to the 'Counters' page, something like this:

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

the component looks something like this:

<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>

I would like to add this component to my Counters.vue page:

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

<template>
  <div >
    <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>

but adding the 'import' or 'components:' lines to the 'Counters.vue' page completely bombs the site. yet it does work fine on the main vue file. How do I link the component to Counters.vue successfully?

CodePudding user response：

You have to import your component directly in the page you are using it and not in the App.vue

CounterView.vue

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

<template>
  <div >
    <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>

Also I suggest you to have a different name between your component and your page to avoid conflict e.g:

Counter.vue for the component
CounterView.vue for the page