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

Question

I am pretty new to Vue.js and have a question.

First I have this code to get all the data from my backend application:

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

    },

I guess this is pretty straightforward. Now I display the data in articles on the frontend in a table view. So I do something like this:

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

This works. But now I want to create an edit mask where the user can change some data elements of this article. So I assume to do something like this:

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

So I need another component that takes the id, reads the data of the article, displays it in a form and handles a save event. I think I know how I resolve the latter part, but how do I do the routing with a new component? Or is there a better way that is recommended in Vue? Something like this maybe?

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

I am grateful for any tips! Thanks!

Answer 1

Yes, you're on the right tracks. You want to use VueRouter . You have to configure routes with your components. For example:

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

Then, you'll reach your Article view with <router-link> (that will be rendered as <a> tag by default):

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

Also, you need <router-view></router-view> tag to render your components view. Component matched by the route will be rendered here.

Everything's on the documentation ;-) https://router.vuejs.org/en/essentials/getting-started.html