使用Vue 3和Vue路由器，如何创建具有多个动态参数的动态路由？
这些参数需要能够以任何顺序传递。
在我们的网络应用中，我们有500多个视图，因此我们在运行时解析了路由，并.vue在必要时加载了组件（），因为在路由文件中设置这500个视图中的每个视图都是很疯狂的。
假设我们有一个称为“产品”的视图，我们的客户有多个过滤器选项，并且这些过滤器在过滤某些内容时在URL中传递。他们可以传递0个参数或10个以上的参数。这取决于他们要过滤的内容。
想象一下，用户可以传递以下URL：
www.webapp.com/products
www.webapp.com/products/color/red
www.webapp.com/products/brand/myBrand/color/green
www.webapp.com/products/size/36/brand/myBrand
以及其他多种动态可能性。
我尝试使用通配符添加路线*，但根本行不通。
我试过的
{path: '/products/:(.*)', ...}
{path: '/products/:params(.*)', ...}
{path: '/products/:(.*)*', ...}
{path: '/products/:params(.*)*', ...}
{path: '/products/*', ...}
{path: '/products-*', ...}
这些尝试均无济于事。有些人抛出了错误，有些人只是从网址中删除了参数，仅保留了/products。在所有尝试中，this.$route.params都是空的。
如何使用Vue 3和Vue Router以任意顺序创建具有多个动态参数的动态路由？
OBS：对于“友好的URL”的缘故，我们不能因为他们是丑陋使用查询
（如：products?color=red&size=10&brand=my%20brand）
您的尝试可能失败了，因为它们将命名参数语法（:后跟参数名）与未命名参数语法（(.*)）混合在一起。
对于零个或多个命名参数（例如named myParams），请使用以下模式：
:myParams*
我建议使用一个props函数来解析要作为道具传递给组件的路由参数，这可以使params格式位于一个中央位置，并使组件不必检查路由：
const routes = [
{
path: '/products/:myParams*',
component: () => import('@/components/Products.vue'),
// parse key-value pairs into an object
props: route => {
const params = route.params.myParams
const props = {}
for (let i = 0; i < params.length; i += 2) {
const value = i + 1 < params.length ? params[i + 1] : null
props[params[i]] = value
}
return props
}
}
]
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句