I have a concern regarding my nuxt.js project
It is known that nuxt.js automatically generates routes.
My page structure looks like this:
https://i.sstatic.net/PXwxh.png
In the header, there is a navigator which I want to use to switch between pages and change the main content.
However, unlike vue-router, nuxt.js does not have <router-view/>
<route-link></route-link>
<router-view></router-view>
Instead, it only has
<nuxt-link></nuxt-link>
So I designed my code structure like this:
<template>
<div >
<Header></Header> <!-- Main body content goes here -->
<Footer></Footer>
</div>
</template>
The Header component:
<navigator-component></navigator-component>
<div>
<Home v-show="$store.state.page_name == 'home' "></Home>
<Search v-show="$store.state.page_name == 'search' "></Search>
<Aboutus v-show="$store.state.page_name == 'about_us' "></Aboutus>
<Contactus v-show="$store.state.page_name == 'contact_us' ">
</Contactus>
</div>
However, there is an issue where the URL does not change, it remains at the root URL.
How can I solve this problem effectively? What changes should I make to the code structure?