Passing prop value after switching tabs

Question

I have one header page that has two tabs. The two tabs direct to two different pages. I am using the area prop that I defined in the header page router view for the system page. It works fine when I am on the system page, but when I go to the product tab and come back to system tab, the prop in the system tab loses the value. It shows as the string "area" in the prop. I would like to get the same value when I switch tabs.

    <div class="tabs">
      <ul>
        <li @click="$router.push({ name: 'system' })">
          <a>SYSTEM</a>
        </li>
        <li @click="$router.push({ name: 'product' })">
          <a>Product</a>
        </li>
      </ul>
    </div>
  <router-view :area="area"/>
  </div>
</template>

System view:

export default {
props: ['area'],

Answer 1

Instead of using @click binding you will be much better off using <router-link> especially since you are using the router-view

this will allow you to pass params simply in your app.

https://router.vuejs.org/api/

you declare your routes like so

const routes = [
  {
    path: '/glossary/:subjectName',
    name: 'glossaryWithParams',
    component: GlossaryPage,
  },
]

Then in your code you can build the element simply like so:

 <router-link
  :to="`/glossary/${subjectName}`"
  class="tabs__link"
>
    Subject Glossary
</router-link>
    ```

Once you implement Router-link your history push state will also be resolved, and your params will work normally.