NUXT - 带动态路径的路由 - 多个参数

Question

我有一条如下所示的路线

路径：＆＃39; / board /：type（\ d {2}）：子类型（\ d {2}）：id（\ d +）＆＃39;

所以这就是这样的事情

http://localhost:3000/board/112233333333

以上情况

11 是类型的动态值（最多两位数）

22 是子类型的动态值（最多两位数）

33333333 是 id 的动态值。

任何人都可以告诉我如何为这个创建文件夹结构？如果不可能，处理这种情况最好的想法是什么？

Answer 1

  

根据问题中的详细信息，

1. 您的网址为http://localhost:3000/board/112233333333

2. 路线中的最后一个参数必须有12位数字（任意随机12位数）

112233333333 - 12位

  

我们将使用以下页面结构来获得最终结果



在validate()中使用 _id.vue检查此路由是否为有效路由。

1. validate()方法必须返回true或false

export default {
    validate ({ params }) {
        return /^([0-9]{12,12})$/.test(params.id)
    }    
}

2. params.id方法中的validate()将保存id （url param中的值），在您的情况下为112233333333

3. /^([0-9]{12,12})$/.test(params.id)如果ID为（url param中的值）有12位数，则会返回true

false - 路线将成功加载

true - 将显示错误页面（找不到404页面 - 因为无法识别路线）

如果验证方法返回true ，则表示允许加载页面。现在我们必须使用vuejs生命周期钩子继续进行。

1.在false生命周期挂钩中，使用created()

从网址中提取值

2.使用正则表达式分离值this.$route.params.id。使用匹配方法分组为您需要的格式。在您的情况下，您已将其拆分为2,2,8位数。下面代码段中的正则表达式完全符合

this.$route.params.id

现在，您可以在正确验证后获得所需的所有值。您可以忽略created(){ var _id = this.$route.params.id; var regex = /^([0-9]{2,2})([0-9]{2,2})([0-9]{8,8})$/; var contents = _id.match(regex); this.type = contents[1]; this.subtype = contents[2]; this.id = contents[3]; } 中的值。

以下是测试我在此描述的方法的代码。

将代码放在contents[0]文件中并验证结果。

_id.vue

参考 https://nuxtjs.org/api/pages-validate