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 - 如何将数据传递到另一条路线？

回答

相关问题