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的组件，读取文章的数据，在表单中显示它并处理一个save事件。我想我知道如何解决后一部分，但是如何使用新组件进行路由？或者是否有更好的方式在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 }
  ]
})

然后，您将使用Article访问<router-link>视图（默认情况下会显示为<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

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

1 个答案: