基本选项如何在 vue-router 中工作答案

【问题标题】：How base option works in vue-router基本选项如何在 vue-router 中工作
【发布时间】：2017-03-08 06:47:06
【问题描述】：

与基本选项的documentation 一样：

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

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

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

演示fiddle.

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

在 Vue Router 4 中，您通过历史 api 设置基本路径：

 const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

那么每个路径都会以 process.env.BASE_URL 为前缀

【讨论】：

【解决方案2】：

遇到同样的问题，设置“base”不起作用 - 解决方法是更新路由器中的 base url：

{ name: 'listings', path: baseUrl + '/listings',   component: PageListings}

并按名称引用路线：

<router-link :to="{ name: 'listings' }" exact>Listings</router-link>

【讨论】：

谢谢。在我偶然发现你的答案之前，我迷失了几个小时。
@Milan 我还建议在字典下提取路线名称，并将其导入到组件中，因此将使用映射而不是字符串文字：{ name: Routes.listings }。将有助于避免输入错误，以及自动建议的好处。

【解决方案3】：

基础的默认值为'/'。从它是如何使用路由来类比：

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

或

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

我只是省略了/app 和works。基础不需要是router-link的一部分

编辑

在`vue-router` 中使用`base`

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

我的路由器配置如下：

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

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

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

所以在dev-server.js 中：

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

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

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

这导致应用程序显示：

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

为了仔细检查，我再次将base 更改为'/'。

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

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

【讨论】：

但我希望所有路由都移动到 /app/ 下，正如here 所要求的那样。
在小提琴中我刚刚看到路由不会发生，我想我需要在某个项目中尝试一次以检查它是否没有添加到 url 中。我希望是这样吗？您的网址中没有/app/<route>？
我不知道为什么嵌套路由也可以工作时它不应该在小提琴中工作。
我在一个 vue 项目中看到了同样的行为。添加基本路由不会显示在 url 中，其他一切都与基本路由无关，就好像它仍然是 '/'。实际上，如果我在 url 中手动添加 /app，则路由无效。
还对base 的实际含义感到困惑。它总是相对于我在服务器上的页面路径？（基本上是根据路由器给路径加前缀？）

【解决方案4】：

我在基本路径上创建了一个重定向到另一个路由。

 {
    name: "Default",
    path: '/',
    redirect: { name: 'OtherRouteName' }
 }

参考： https://next.router.vuejs.org/guide/essentials/redirect-and-alias.html

【讨论】：

在vue-router 中使用base

在`vue-router` 中使用`base`