base 选项在 vue-router 中是如何工作的

Question

作为基本选项的标准 文档：

应用程序的基本 URL。例如，如果整个单页应用程序在 /app/ 下提供服务，那么 base 应该使用值“/app/”。

但我试过如下，它似乎不起作用：

 const router = new VueRouter({
  base: "/app/",
  routes
})

演示 小提琴。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

基数的默认值为 '/' 。类比它是如何用于路由的：

 <router-link to="home">Home</router-link>

或者

<router-link :to="{ path: '/abc'}" replace></router-link>

我只是省略了 /app 并且它 有效。基地不需要是 router-link 的一部分

编辑

在 base 中使用 vue-router

（对于此测试，我使用了 vue-cli 和 webpack 模板。）

我的路由器配置如下：

 export default new Router({
  base: '/app',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'RangeInputDemo',
      component: ComponentDemo
    }
  ]
})

添加 base as '/app' 对整个项目中发生的路由没有影响，就好像 base 仍然设置为 '/' 。

---

我试图从服务器端更改 url（服务项目的 url）。

所以在 dev-server.js 其中：

 var uri = 'http://localhost:' + port

控制app的url，我稍微修改了一下：

 var uri = 'http://localhost:' + port + '/app'

这导致应用程序显示：

注意 fullPath '/' 在 vue 控制台（第二张图片）中是 —。

只是为了 base 更改为 --- '/' 。

---

因此， base 属性 router 配置是设置服务器设置的基本 url，如果服务器在 '/' 以外的路由上为应用程序提供服务 --- 然后 base 可用于让应用程序从设置的 url 运行。

---

由于问题需要在 /app 下移动路由，我认为 /app 作为父路由将是这种情况下的解决方案，如果服务器不应该更改路由它在其上服务。

原文由 Amresh Venugopal 发布，翻译遵循 CC BY-SA 3.0 许可协议