带有可选第一路由参数的Vue路由器路由

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有可选第一路由参数的Vue路由器路由相关的知识,希望对你有一定的参考价值。

我有一个路由列表,这些路由都可以具有可选的第一个参数。如果该参数存在于网址中,它将更改我在api调用中使用的标头。其他所有内容保持不变。除了创建两组路由来处理此问题之外,还有没有办法我可以将第一个参数列出为可选参数,并且只定义一次我的路由?

let routes = [
{
    //for this route path and all the others, there can be an :environment param present in the front (/:environment/:event_identifier/register/pages/:page_uuid) or it can be (/:event_identifier/register/pages/:page_uuid)
    //everything else about this and the other routes will remain the same
    path: '/:event_identifier/register/pages/:page_uuid',
    name: 'ContentPage',
    component: ContentPage,
    meta: {
        requiresAuth: true,
    },
},
{
    path: '/:event_identifier/register/:pagenum',
    name: 'Register',
    component: Register,
    meta: {
        requiresAuth: true,
    },
},
{
    path: '/:event_identifier',
    name: 'Login',
    component: Login,
    children: [
        {
            path: '/:event_identifier/:registration_uuid/:pagenum',
            name: 'editRegistration',
            component: Login,
        },
    ],
},
]
答案

您可以这样声明一个可选参数:

path: '/myroute/:param?'

?之后的:param使其为可选,因此它将匹配不带参数的http://domain/myroute或带参数的http://domain/myroute/25

但是,我建议在每条路线上都将您的可选参数设为last。否则,您将获得一些不清楚的行为。想象一下,您有一条带有可选第一个参数的路由路径。

path: '/myroute/:optional?/:notoptional'

如果您访问http://domain/myroute/25/100,则25将与:optional?相匹配

但是如果您访问http://domain/myroute/25,则25将与:notoptional相匹配

以上是关于带有可选第一路由参数的Vue路由器路由的主要内容,如果未能解决你的问题,请参考以下文章

带有可选参数的路由

Vue路由器上的可选参数

vue路由对象($route)参数简介

Vue--参数传递及重定向

带有可选参数和 ajax 调用的 Laravel 路由

VSCode自定义代码片段11——vue路由的配置