VueRouter默认子路由，不带斜杠 [英] VueRouter default child route without trailing slash

问题描述

VueRouter始终在子路径的路径之前添加尾部斜杠.所以可以说我有一个这样的路由配置:

VueRouter always adds a trailing slash before the path of the child route. So lets say I have a route config like this:

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

我希望路线像这样工作:

I want the routes to work like this:

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

• /home -> loads HomeIndex
• /home/123 -> Loads HomeArticle with :aid=123

但是，当访问子路由时，VueRouter始终在父路由路径上强制尾随斜杠，因此路由的工作方式如下:

But VueRouter always forces the trailing slash on the parent route path, when accessing a child route, so the routes work like this:

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

• /home/ -> loads HomeIndex
• /home/123 -> loads HomeArticle with :aid=123

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

This doesn't work for me, as I'm working with an application that has specific SEO requirements that require no trailing slashes.

请注意，我正在使用命名路由生成URL并在路由之间移动，因此尽管我可以直接链接到"/home"，但我想使用路由名称("home.index")，因此代码更多干燥的.我可以将路径存储在常量中的某个位置，但是这样做的缺点是，当以编程方式导航时，不能将"params"属性和"path"属性一起使用.

Note that I'm using named routes to generate URLs and move between routes, so while I could link to "/home" directly, I want to use the names of routes ( "home.index") so code is more DRY. I could store the paths in constants somewhere, but the drawback of that is that you can't use the 'params' prop together with the 'path' prop when programmatically navigating.

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

I could split out HomeIndex as a separate path entirely, so its not a child, but I need HomeIndex and HomeArticle both to be loaded within the root HomeBase component.

有什么想法可以实现这一目标吗?也许通过一些VueRouter挂钩或插件?

Any ideas how I could achive this? Maybe through some VueRouter hooks or plugins?

推荐答案

我已经尝试了对我有用的下一个结构:

I've tried next structure which worked for me:

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 进行工作，而无需在末尾添加斜杠，即:

Using versions: Vue - 2.5.2, vue-router - 3.0.1. Routing works both using name and path without adding trailing slash at the end, i.e.:

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

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

这篇关于VueRouter默认子路由，不带斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！