How to activate the history mode of the vue-router on a subrout of a website written in php, apache server?

Question

I am including a SPA on my website in apache server, but when accessing the route of this, I load the views but the route returns to the main domain. How should I configure the router or .htaccess to correct this?

My website is like www.example.com , and the Vue SPA is located in www.example.com/en/route1/route2/spa .

When I access this route, the Vue SPA loads but the route returns to the main domain www.example.com , and the Vue SPA routes loads as usual but in the main domain route, like www.example.com/spa/spaRoute1 .

What I want is to preserve the original route of the Vue SPA, to shows the SPA routes from there, like www.example.com/en/route1/route2/spa/spaRoute1 using the history mode of Vue-Router.

I have tried modify the .htacces like the documentation of vue-router shows but it doesnt help.

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

I have the router in history mode like this:

export default new Router({
    mode: 'history',
   etc....
})

and my .htaccess using the configuration of vue-router docs

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
</IfModule>

Answer 1

you tried using the base property ? https://router.vuejs.org/api/#base