How base option works in vue-router

Question

As par documentation of base option:

The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".

But I have tried it like following, It does not seems to work:

const router = new VueRouter({
  base: "/app/",
  routes
})

Demo fiddle.

Answer 1

In the Vue Router 4, you set base path by history api:

 const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

Then each path would be prefixed with process.env.BASE_URL

Answer 2

The base has a default value of '/'. Drawing analogy from how it is used to route:

<router-link to="home">Home</router-link>

or

<router-link :to="{ path: '/abc'}" replace></router-link>

I just omitted the /app and it works. The base doesn't need to be part of the router-link

EDIT

Use of base in vue-router

(For this test I had used vue-cli with the webpack template.)

I had my router configurations like so:

export default new Router({
  base: '/app',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'RangeInputDemo',
      component: ComponentDemo
    }
  ]
})

Adding base as '/app' made no difference to the routing that happened throughout the project, as if the base was still set to '/'.

---

I tried to change the url from the server side (the url at which the project is being served).

So in dev-server.js where :

var uri = 'http://localhost:' + port 

controls the url of the app, I made a slight modification to:

var uri = 'http://localhost:' + port + '/app'

This caused the application to show:

Notice the fullPath being '/' in the vue console (second image).

Just for double checking, I changed the base to '/' again.

---

So, the base property of the router configuration is to set the base url as set by the server, if the server serves the application at a route other than '/' then the base can be used for having the application be run from the set url.

---

Since the question requires the routes being moved under /app, I think having /app as the parent route would be the solution in that case, if the server isn't supposed to change the route on which it serves.

Answer 3

Had the same problem, setting "base" didn't work - workaround is to update base url in router:

{ name: 'listings', path: baseUrl + '/listings',   component: PageListings}

and refer to routes by name:

<router-link :to="{ name: 'listings' }" exact>Listings</router-link>