Dynamically set base in vue-router

Question

I am trying to dynamically pass in data to set the base for vue-router. Is it possible to setup a separate function elsewhere that passes in a base name variable? For example, if an editor wanted to set the base name via a CMS, I’d want a way to pass (or import) that name through.

// router/index.js

export default new VueRouter({
base: '[PASS BASE NAME HERE]',
routes: [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
],
mode: 'history'
})

Answer 1

I ended up setting a variable on my index.html and importing it to the router. This can also be done by importing a variable from a module js file, but setting it on the html seems to avoid build issues. Simpler solution than I thought, thanks @lamelemon.

// index.html

    var serializedModel = @Html.Raw(Model.Serialized());


// router/index.js

    var baseUrl = serializedModel.BaseUrl;

    export default new VueRouter({
      base: baseUrl,
      mode: 'history',
      routes: [{...}]
    })