vue.js - 在 vue-router 中动态设置基础

Question

我正在尝试动态传递数据以设置 vue-router 的基础。是否可以在其他地方设置一个单独的函数来传递一个基本名称变量？例如，如果编辑想通过 CMS 设置基本名称，我想要一种方法来传递(或导入)该名称。

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

我最终在我的 index.html 上设置了一个变量并将其导入路由器。这也可以通过从模块 js 文件中导入变量来完成，但将其设置在 html似乎避免了构建问题。比我想象的更简单的解决方案，谢谢@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: [{...}]
    })