NUXT-具有动态路径的路线-多个参数

nuxt.js Vue.js

番长猴子

2020-03-24

我有一条如下的路线

路径:'/ board /:type(\ d {2}):subtype(\ d {2}):id(\ d +)'

所以这是这样的

http:// localhost:3000 / board / 112233333333

在上述情况下

11类型的动态值 (最多两位数)

22子类型的动态值(最多两位数)

33333333id的动态值

有人可以让我知道如何为该文件夹创建一个文件夹结构吗?如果不可能的话,处理这种情况的最佳方法是什么?

第3305篇《NUXT-具有动态路径的路线-多个参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
GilTomL 2020.03.24

根据您问题的详细信息,

  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 in validate() method will hold the id (value in url param) , in your case it is 112233333333

3./^([0-9]{12,12})$/.test(params.id) will return true if id (value in url param) has 12 digits else return false

true - route will be loaded successfully

false - error page will be displayed (404 page not found - because route was not recognized)

if true is returned by the validate method then this means the page is allowed to be loaded. Now we have to make use of vuejs life cycle hooks to proceed further.

1.In the created() life cycle hook, extract the value from the url using this.$route.params.id

2.Split the value this.$route.params.id using regex. Use match method to group into the format you need. In your case you have split it into 2,2,8 digits. The regex in below snippet exactly does that

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

Now you have all the values you need after proper validation. Your can ignore the value in contents[0].

Below is the code for testing the approach i have described here.

Place the code in _id.vue file and verify the results.

/* template code */
<template>
  <section>
    <h3>in board _id</h3>    
    <div>
        <div>type = {{type}}</div>
        <div>subtype = {{subtype}}</div>
        <div>id = {{id}}</div>
        <div>urlParam = {{$route.params}}</div>
    </div>
  </section>
</template>

/* script */
<script>
export default {
    /* variables */
    data(){
        return{
            type : null,
            subtype : null,
            id : null
        }
    },
    /* route validation */
    validate ({ params }) {
        return /^([0-9]{12,12})$/.test(params.id)
    },
    /* extracting url params */
    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]; 
    }
}
</script>

Reference https://nuxtjs.org/api/pages-validate

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android