vue-router で渡すルートパラメータを実装する方法

この記事では、vue-router ルーティングでパラメータを渡す方法を主に紹介しますので、参考にしてください。

パラメータを渡すルート。ニュース リスト ページなど、ルート上でパラメーターを渡す必要がある場合は、ニュース ID をニュース詳細ページに渡す必要があることがよくあります。

1.ニュース一覧ページテンプレート

 <template id="news">
    <p>
      <h2>新闻列表</h2>
      <ul>
        <li>
          <router-link to="/news/001">新闻001</router-link>
        </li>
        <li>
          <router-link to="/news/002">新闻002</router-link>
        </li>
      </ul>      
    </p>
  </template>

/news/001にアクセスし、ニュース詳細ページにジャンプし、001のニュースを表示します。

2. ニュース詳細ページコンポーネントの準備

 <template id="NewsDetail">
    <p>
      新闻详细页面
      <span>{{$route.params.id}}</span>
    </p>
  </template>

$route.params.id はルートのパラメータを取得します

3. ルートを定義し、ルートを追加します

{ path: '/news/:id', component: NewsDetail },

4. コード全体は次のとおりです。以下：

  
  
  
  

 
  

    

      home
      news
    
     
  


  
  

  

  
  

  

  

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

JavaScriptでプリンターを接続する方法

vueコンポーネントでイベントを渡す方法

Vueイベント修飾子のキャプチャの使い方を詳しく紹介

reactでページを更新する-ルーター404の問題

以上がvue-router で渡すルートパラメータを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。