web-dev-qa-db-ja.com

NUXT-動的パスを使用したルート-複数のパラメーター

以下のようなルートパスがあります

パス： '/ board /：type（\ d {2}）：subtype（\ d {2}）：id（\ d +）'

だからこれはこのようなものです

http：// localhost：3000/board/1122333333

上記の場合、

11はtypeの動的な値です（最大2桁）

22はサブタイプの動的な値です（最大2桁）

33333333は、idの動的な値です。

このフォルダ構造を作成する方法を教えてください。不可能な場合、このケースを処理するための最良のアイデアは何ですか？

nuxt.js
4
Bujji

あなたの質問の詳細に従って、

  1. あなたのURLは_http://localhost:3000/board/112233333333_です

  2. ルートの最後のパラメータは、合計12桁（任意のランダムな12桁）である必要があります

112233333333-12桁

以下のページ構造を使用して、最終結果を取得します

we will work with this structure to get to your final result

__id.vue_のvalidate()を使用して、このルートが有効なルートであるかどうかを確認します。

1 .validate()メソッドはtrueまたはfalseのいずれかを返す必要があります

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

2 ._params.id_ in validate()メソッドはid（value in url param）を保持します。あなたの場合は_112233333333_です。

3 ./^([0-9]{12,12})$/.test(params.id)はid（url paramの値）が12桁の場合はtrueを返し、それ以外の場合はfalseを返します

true-ルートは正常にロードされます

false-エラーページが表示されます（404ページが見つかりません-ルートが認識されなかったため）

validateメソッドによってtrueが返された場合、これはページのロードが許可されていることを意味します。次に進むには、vuejsライフサイクルフックを利用する必要があります。

1. created()ライフサイクルフックで、_this.$route.params.id_を使用してURLから値を抽出します

2.正規表現を使用して値_this.$route.params.id_を分割します。 matchメソッドを使用して、必要な形式にグループ化します。あなたの場合、あなたはそれを2、2、8桁に分割しました。以下のスニペットの正規表現はまさにそれを行います

_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_ファイルに配置し、結果を確認します。

_/* 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>
_

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

9
divine