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

Question

因为不同的数字范围代表不同的产品，不同的产品页面上有不同的信息要展示，
比如需要把 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）
请教大家要怎么写路由配置呢，感谢

Answer 1

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
    }
]

Answer 2

routes里要配置
routes: [
    {
      path: '/path23-30',
      redirect: { path: '/path23-30' }
    },
    {
      path: '/path31-100',
      redirect: { path: '/path31-100' }
    }
]
    
然后页面使用
标签：<router-link :to="{ name: 'path23-30', params: {id: id}}">跳转</router-link>
或者
method：this.$router.push({name: 'path23-30'})跳转