I've encountered an issue where the vue-router is only toggling the URL when clicking on the navigation link, but not updating the view component. Surprisingly, there are no apparent errors in my code. Despite this, the console indicates that the Home component is displayed on the view, but clicking on the second nav link does not load the NotMain component as expected.
// router index.js
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/shops',
name: 'Shops',
component: Shops,
},
],
});
export default router;
// Home view
<template>
<div class="wrapper">
<Header />
<Main />
<Footer />
</div>
</template>
<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import Main from '../components/Main.vue';
export default {
name: 'Home',
components: {
Header,
Footer,
Main,
},
};
</script>
<style lang="scss" scoped></style>
// another view
<template>
<div class="wrapper">
<NotMain />
</div>
</template>
<script>
import NotMain from '../components/NotMain.vue';
export default {
name: 'Shops',
components: {
NotMain,
},
};
</script>
<style lang="scss" scoped></style>