CODEWITHSUNDEEP
vue.jsvue-router
xcer
xcer

Reputation: 1707

Customize the route prefix pattern using Vue-Router

I am trying to use Vue-Router to pattern URLs in my new project so they look just like URLs in an existing (non-Vue) application. Existing application URLs look like this:

My Vue Router currently looks like this:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/page1'
    },
    {
      path: '/page1',
      component: Assessments
    },
    {
      path: '/page2',
      component: Assessments
    }
  ]
})

But, of course, this generates URLs that look like this:

How can I configure my router to mimic the /#!route pattern?

Upvotes: 3

Views: 15258

Answers (2)

ProgZi
ProgZi

Reputation: 1267

For Vue 3 and Vue Router 4 The base option is now passed as the first argument to createWebHistory:

import { createRouter, createWebHistory } from 'vue-router'
    createRouter({
        history: createWebHistory('/base-directory/'),
        routes: [],
})

Migrating from Vue 2 documentation

Upvotes: 0

wxsm
wxsm

Reputation: 586

You can use the base option:

base

  • type: string
  • default: "/"

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/".

https://router.vuejs.org/en/api/options.html#base

I have tried it with your case, it also works with /#!.

Upvotes: 8

Related Questions