ダイナミックルーティングとエントリNuxtを確認し、ルーティング

実際には、動的ルーティングとパラメータをルーティングされます。詳細ページニュースニュース以下のモジュールの多くを持って例えば、我々は今、この時間は、私たちは、ダイナミックルーティングの助けを必要としています。

ニュースの詳細ページには、
アンダースコアVueのファイルで始まる_id.vue新しいファイルの下、当社のニュースフォルダは、ダイナミックルーティングは、その後、パラメータを受信するために、ファイル内部で$ route.params.idがあります。

/pages/news/_id.vue

<テンプレート> 
    の<div> 
        <H2>ニュース・コンテンツ{{$ route.params.id}} </ H2> 
        <UL> 
            <LI> <a href="/">ホーム</a>に</ LI> 
        < / UL> 
    </ div> 
</テンプレート>

 

 

 変更ニュースルートが
、我々は/pages/news/index.vueを改訂し、詳細なニュース-1やニュース-2のルーティングの2つのページを追加します。

<テンプレート> 
  の<div> 
    <H2>ニュースインデックスページ</ H2> 
    <P> NewsId：{{$ route.params.newsId}} </ P> 
    <UL> 
      <LI> 
        <nuxtリンク= "/"へ>ホーム</ nuxtリンク> 
      </ LI> 
       <LI> 
        = "/ニュース/ 123">ニュース-1 </ nuxtリンク>から<nuxtリンク
      </ LI> 
       <LI> 
        =と<nuxtリンク"/ニュース/ 456">ニュース-2 </ nuxtリンク> 
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート>

 

 

 チェック動的パラメータ
私たちは、検証のためのページには、パラメータ渡しの正しさが必要であるチェック、Nuxt.jsも（）思いやりの校正方法を用意しました。
/pages/news/_id.vue

<テンプレート> 
  の<div> 
    <H2>ニュース・コンテンツ[{{$ route.params.id}} </ H2> 
    <UL> 
      <LI> 
        ホーム</ nuxtリンク<nuxtリンク= "/"へ> > 
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  検証（{}のparams）{ 
    リターン / ^ \ dは+ $ / .TEST（params.id）
  } 
}
 </ SCRIPT>

/pages/news/index.vue

<テンプレート> 
  の<div> 
    <H2>ニュースインデックスページ</ H2> 
    <P> NewsId：{{$ route.params.newsId}} </ P> 
    <UL> 
      <LI> 
        <nuxtリンク= "/"へ>ホーム</ nuxtリンク> 
      </ LI> 
       <LI> 
        = "/ニュース/ 123">ニュース-1 </ nuxtリンク>から<nuxtリンク
      </ LI> 
       <LI> 
        =と<nuxtリンク"/ニュース/ chencheng">ニュース-2 </ nuxtリンク> 
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート>

 

 

 

私たちは、それが404ページに偽を返す場合、通常のノーマルアクセスページならばリターンが真、定期点検が行われ、その後使用し、validateメソッドを使用してのparamsに渡します。