vue.js - 如何用 vue-router 根据数字范围路由到不同的vue文件

问题描述

问 题

因为不同的数字范围代表不同的产品，不同的产品页面上有不同的信息要展示，
比如需要把 23-30的数字范围路由到23-30.vue（具体就是，#/product/23、#/product/24 ... 路由到 23-30.vue），
而31-100的数字范围路由到 #/product/31-100.vue（具体就是，#/product/31、#/product/32 ... 路由到 31-100.vue）
请教大家要怎么写路由配置呢，感谢

解决方案

vue-router 动态路由是用了 path-to-regexp，所以可以在路径上写正则表达式
简单写下

routes: [
    {
      path: '/product/(2[3-9]|30)',
      component: 23-30.vue
    },
    {
      path: 'product/3[1-9]|[4-9][0-9]|100',
      component: 31-100.vue
    }
]

这篇关于vue.js - 如何用 vue-router 根据数字范围路由到不同的vue文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！