Vue.js同前缀路由下获取当前路由名称错误问题

Vue Router的路由匹配是从上到下按顺序执行的，当前配置里/region-price/:state_id?这个带可选参数的路由会优先匹配/region-price/city_info和/region-price/area_info路径——因为city_info、area_info会被系统识别为state_id的参数值，导致后面精确匹配的路由永远无法被命中。

调整路由数组的顺序，把精确匹配的路由放在带参数路由的前面，让精确路径优先被匹配：

const routes = [
    {
        path: "/region-price/city_info",
        component: RegionPrice,
        name: "region-price-city"
    },
    {
        path: "/region-price/area_info",
        component: RegionPrice,
        name: "region-price-area"
    },
    {
        path: "/region-price/:state_id?",
        component: RegionPrice,
        name: "region-price"
    }
];

调整后重新测试：

• 访问https://test.com/region-price/1时，路由名称为region-price，结果正常；
• 访问https://test.com/region-price/city_info（含city_id参数）时，路由名称为region-price-city，符合预期；
• 访问https://test.com/region-price/area_info时，路由名称为region-price-area，符合预期。

内容的提问来源于stack exchange，提问作者Hai Truong IT