在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事件修飾符capture的使用

在react-router中刷新頁面出現404問題

#

以上是在vue-router中如何實現路由傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章！