SoFunction
Updated on 2025-03-02

How to add url prefix to a page with vue

Add url prefix to vue page

Find this code in

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

Plus

base: 'web', //Page routing prefix

Modified code:

const createRouter = () => new Router({
  mode: 'history', // require service support
  base: 'web',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

Now each page will have a [web] prefix

Set the specified prefix on the vue path

Sometimes when using a project, we need to specify a prefix path (just like the virtual path in tomcat), how to use it in vue at this time.

solve

At this time, we can use the base property in vue-router. Using this property, we can add the specified prefix in front of the path.

export default new Router({
  mode: 'history', //Backend support can be opened  # base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

The access path at this time is: http://127.0.0.1:8080/login.

When we use the base property of vue-router.

export default new Router({
  mode: 'history', //Backend support can be opened  base: '/wtlicence',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

The access path at this time is: http://127.0.0.1:8080/wtlicence/login

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.