Vue.js - 如何將數據傳遞到另一條路線？

我對Vue.js很新，有一個問題。Vue.js - 如何將數據傳遞到另一條路線？

首先，我有這樣的代碼，從我的後端應用程序中獲得的所有數據：

var app2 = new Vue({ 
    delimiters: ['%%', '%%'], 
    el: '#app2', 

    data: { 
     articles: [] 
    }, 

    mounted : function() 
    { 
     this.loadData(); 
    }, 

    methods: { 
     loadData: function() { 
      this.$http.get('/backend/FpArticle/articleApi').then(response => { 
       // get body data 
       this.articles = response.body; 
      }, response => { 
       // error callback 
      }); 
     }, 

    },

我想這是非常簡單的。現在我在表格視圖中顯示前端文章中的數據。所以我做這樣的事情：

<tr v-for="article in articles"> 
    <td>{{ article.name }}</td> 
</tr>

這個工程。但是現在我想創建一個編輯掩碼，用戶可以在其中更改本文的一些數據元素。所以我承擔做這樣的事情：

<tr v-for="article in articles"> 
    <td>{{ article.name }}</td> 
    <td><a href="/article/{{ article.id }}">edit</a></td> 
</tr>

所以，我需要的是採取ID，讀文章的數據，其顯示在形式和處理保存事件的另一組成部分。我想我知道如何解決後面的問題，但是如何使用新組件進行路由？或者是否有更好的Vue推薦的方法？這樣的事情可能嗎？

<tr v-for="article in articles"> 
    <td>{{ article.name }}</td> 
    <td><button v-on:click="editArticle(article.id)">edit</button></td> 
</tr>

我很感激任何提示！謝謝！

來源

2017-10-09 Torben

在'editArticle'上，你嘗試使用'router.push'？ – imcvampire

是的，你在正確的軌道上。你想使用VueRouter。您必須使用組件配置路由。例如：

const router = new VueRouter({ 
    routes: [ 
    { path: '/articles', component: ArticlesList }, 
    { path: '/articles/:id', component: Article } 
    ] 
})

然後，你會<router-link>達到你Article視圖（將被渲染爲默認<a>標籤）：

<td><router-link to="'/article/' + article.id">edit</router-link></td>

此外，還需要<router-view></router-view>標籤來顯示你的組件視圖。通過路線匹配的組件將在這裏呈現。

一切都文檔;-) https://router.vuejs.org/en/essentials/getting-started.html

來源

2017-10-10 07:18:37

Vue.js - 如何將數據傳遞到另一條路線？

回答

相關問題