My Vue project works perfectly in hash router mode, but when I switch to history mode, only the navbar is displayed and the <router-view> is commented out. I have already configured my apache settings for history mode.
router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
App.vue
<template>
<Navbar />
<router-view />
</template>
<script>
import Navbar from "@/components/Navbar";
export default {
components: { Navbar },
};
</script>
If I replace the <router-view> in my app.vue with the Home view component directly, it does work. However, that defeats the purpose of using vue router. Can someone please help me?
Below is my server configuration. I am using Apache and deploying it on a subdirectory called v2
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /v2/
RewriteRule ^v2/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . v2/index.html [L]
</IfModule>