VueRouter 默认子路由没有尾部斜杠

Question

VueRouter 总是在子路由的路径之前添加一个尾部斜杠。所以可以说我有一个这样的路由配置：

const routes = [
    path: '/home',
    components: {
        default: HomeBase
    },
    children: [
        {
            path: '',
            component: HomeIndex,
            name: 'home.index'
        },
        {
            path: ':aid',
            component: HomeArticle,
            name: 'home.article'
        }
    ]
]

我希望路线像这样工作：

• /home -> 加载 HomeIndex
• /home/123 -> 使用 :aid=123 加载 HomeArticle

但是 VueRouter 在访问子路由时总是在父路由路径上强制使用尾部斜杠，因此路由的工作方式如下：

• /home/ -> 加载 HomeIndex
• /home/123 -> 使用 :aid=123 加载 HomeArticle

这对我不起作用，因为我正在使用具有特定 SEO 要求且不需要尾部斜杠的应用程序。

请注意，我使用命名路由来生成 URL 并在路由之间移动，因此虽然我可以直接链接到“/home”，但我想使用路由的名称（“home.index”），因此代码更加枯燥。我可以将路径存储在某个地方的常量中，但这样做的缺点是您不能在以编程方式导航时将 'params' 道具与 'path' 道具一起使用。

我可以将 HomeIndex 完全拆分为单独的路径，因此它不是子项，但我需要将 HomeIndex 和 HomeArticle 都加载到根 HomeBase 组件中。

任何想法我怎么能做到这一点？也许通过一些 VueRouter 钩子或插件？

Answer 1

我尝试了下一个对我有用的结构：

const routes = [
    path: '/home',
    components: {
        default: HomeBase
    },
    children: [
        {
            path: '/home',
            component: HomeIndex,
            name: "homeindex"
        },
        {
            path: ':aid',
            component: HomeArticle,
            name: "aid"
        }
    ]
]

这是工作小提琴

使用版本：Vue - 2.5.2, vue-router - 3.0.1. 路由既可以使用name也可以path不使用末尾添加斜杠，即：

this.$router.push({name: "homeindex"})

this.$router.push("/home")