Vue.js - 如何将数据传递到另一条路线？

Question

我对 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>

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

Answer 1

是的，你在正确的轨道上。 你想使用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