Vue-router: Host based routing?

Created on 17 Jul 2017 · 2Comments · Source: vuejs/vue-router

What problem does this feature solve?

I have multiple sites that are based off the same SPA, content is just a bit different.
So instead of having 3 separate sites, I can just have a single one and route based on hostname.

it would just be a subdomain change so nothing major, but allowing certain routes' paths to be the same but act differently depending on the hostname.
This would be helpful for maintenance purposes

What does the proposed API look like?

No idea yet... I am busy working on it, but wanted to get any input you guys may have?
Or maybe if there is a better way to do what I am trying to do?

Source

mrinc

👍1

Most helpful comment

@mrinc, considering that hostname never changes you can just:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

const generateRoutes = () => {
  switch (location.hostname) {
    case 'google.com': {
      return [
        path: '/',
        component: Hello
      ]
    }
    case 'google.co.nz': {
      return [
        path: '/homepage',
        component: Hello
      ]
    }
  }
}

Vue.use(Router)

export default new Router({
  routes: generateRoutes()
})

nickmessing on 17 Jul 2017

👍11

All 2 comments

@mrinc, considering that hostname never changes you can just:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

const generateRoutes = () => {
  switch (location.hostname) {
    case 'google.com': {
      return [
        path: '/',
        component: Hello
      ]
    }
    case 'google.co.nz': {
      return [
        path: '/homepage',
        component: Hello
      ]
    }
  }
}

Vue.use(Router)

export default new Router({
  routes: generateRoutes()
})

nickmessing on 17 Jul 2017

👍11

Nick's suggestion should solve your problem. Closing this issue.