CODEWITHSUNDEEP
vue.jsiisvue-router
Farid
Farid

Reputation: 1020

Add a slug in URL

I'm hosting a Vue SPA in IIS.

I'm using VueRouter, and in my routes I have:

const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/customers', name:'customers', component: Customers },
    { path: '/qadcustomers', name:'qadcustomers', component: QadCustomers },
    { path: '/customer/:id?', name:'customer', component: Customer, props: true },
    { path: '/qadcustomer/:id?', name:'qadcustomer', component: QadCustomer, props: true },
    { path: '/import', name:'import', component: Import },
];

In the web server, I'm putting the files inside the directory: inetpub/wwwroot/dev/myapplication

What I would like to happen is that the application is accessed at:

https://myserver/dev/myapplication/ <-- This will go to Home

https://myserver/dev/myapplication/customers <-- This will go to Customers

https://myserver/dev/myapplication/qadcustomers <-- This will go to QadCustomers

What happens now is that all my page is at https://myserver/customers, or https://myserver/qadcustomers. How do I add the slug /dev/myapplication/ to the URL?

When this application goes to test server, the slug would be /test/myapplication, and in production it's going to be /regionaloffice/myapplication.

Upvotes: 0

Views: 500

Answers (2)

Jalpa Panchal
Jalpa Panchal

Reputation: 12844

try to use the base option in the constructor:

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/api/#linkactiveclass

Upvotes: 1

Kaan Ersoy
Kaan Ersoy

Reputation: 82

You can use the Nested Routes - Vue Router

const router = new VueRouter({
  routes: [
    {
      path: '/dev/myapplication',
      component: MyApplication,
      children: [
        {
          path: 'route1',
          component: Route1
        },
        {
          path: 'route2',
          component: Route2
        }
...

It will add the /dev/myapplication prefix for all routes.

So your routes will looks like this:

  • /dev/myapplication/route1
  • /dev/myapplication/route2
  • /dev/myapplication/route3

Upvotes: 0

Related Questions