javascript - 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
            });
        },

    },

我想这很简单。现在我在表格 View 中显示前端文章中的数据。所以我做了这样的事情:

<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 }
  ]
})

然后，您将到达您的 Article查看 <router-link> (默认情况下将呈现为 <a> 标签):

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

另外，你需要 <router-view></router-view>标记以呈现您的组件 View 。路由匹配的组件会在这里渲染。

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