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

亚连
リリース: 2018-06-15 11:42:32
オリジナル
1731 人が閲覧しました

この記事では、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: &#39;/news/:id&#39;, component: NewsDetail },
ログイン後にコピー

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




  
  
  
  

 
  

home news

ログイン後にコピー

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

関連記事:

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

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

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

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!