在 vue-router 中动态设置基础答案

【问题标题】：Dynamically set base in vue-router在 vue-router 中动态设置基础
【发布时间】：2017-11-06 23:20:42
【问题描述】：

我正在尝试动态传递数据以设置 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'
})

【问题讨论】：

如果路由仍然使用相同的嵌套路由，那么你不能只使用dynamic route matching 代替吗？
你想从家里换base还是联系？
@lamelemon - 例如，使用动态路由，我可以将基础设置为 '/:brandname' 吗？如果动态完成，您将如何设置可以访问的特定“品牌”？假设您想让它仅适用于品牌 X、Y、Z。这是在某个地方定义的吗？谢谢
@slipkid 我在想this 之类的东西，然后将您的商店或某些共享状态导入路由器文件，并在导航防护中使用该共享状态来检查允许的品牌。
@lamelemon 谢谢，这很有帮助，但对于我的要求可能太复杂了：我只想创建一个可自定义的base 并在运行时对其进行配置。因此，如果在我的 index.html 上定义了占位符变量，我可以将该变量作为 base 的名称传递给路由器。

标签： vue.js vuejs2 vue-router

【解决方案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: [{...}]
    })

【讨论】：