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

Question

作为基本选项的documentation：

  

应用的基本网址。例如，如果整个单页面应用程序在/ app /下提供，那么base应该使用值＆＃34; / app /＆＃34;。

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

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

演示fiddle。

Answer 1

基数的默认值为'/'。从它如何用于路线的类比来描述：

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

或

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

我刚刚省略了/app和works。基础不需要成为router-link

的一部分

修改

在base

中使用vue-router

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

我的路由器配置如下：

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

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

我尝试更改服务器端的URL（服务项目的URL）。

所以在dev-server.js其中：

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

控制应用的网址，我稍作修改：

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

这导致应用程序显示：

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

只是为了进行双重检查，我再次将base更改为'/'。

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

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

Answer 2

遇到相同的问题，设置“基本”无效-解决方法是更新路由器中的基本网址：

Hello
Hello

并按名称引用路线：

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

Answer 3

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

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

然后每个路径都以 process.env.BASE_URL 为前缀