如何基数选择工作在VUE路由器

Question

与参数文件的基础选项：

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

但是我尝试了如下操作，它似乎不起作用：

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

演示小提琴。

Answer 1

在Vue Router 4中，您可以通过history api设置基本路径：

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

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

Answer 2

基数的默认值为'/'。从路由的使用方式来类比：

<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添加为'/app'对整个项目中发生的路由没有影响，好像base仍设置为一样'/'。

我试图从服务器端更改URL（正在提供项目的URL）。

所以在dev-server.js哪里：

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

控制应用的网址，我做了少许修改：

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

这导致应用程序显示：

注意fullPath存在'/'在VUE控制台（第二图像）。

只是双重检查，我改变了base对'/'一次。

因此，base所述的属性router的配置是由服务器来设置基本URL作为设定，如果服务器提供比其他的路径的应用程序'/'，则base可以用于具有应用来从所述一组URL运行。

由于该问题需要根据被移动的路线/app，我认为有/app作为父路线会在这种情况下的解决方案，如果服务器不应该是改变其所服务的路线。