I have integrated Vue into my Wordpress theme, but I am facing an issue with the router when setting mode: 'history'. The site goes blank and even after trying to configure the .htaccess file, nothing seems to work. My project is located in the VueWP directory within the XAMPP htdocs directory. Everything works fine when using hash mode. Where could the mistake be coming from?
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /VueWP/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /VueWP/index.php [L]
</IfModule>
# END WordPressThis is how my VueRouter looks:
import Vue from 'vue';
import Router from 'vue-router';
import Main from '../Components/Main';
import ArticlePage from '../Components/ArticlePage';
import Page from '../Components/Page';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/post/:url',
name: 'ArticlePage',
component: ArticlePage
},
{
path: '/page/:url',
name: 'Page',
component: Page
}
],
});