vue-router를 사용하여 한 뷰에서 다른 뷰로 데이터를 전달하는 방법

vue-router를 사용하여 한 뷰에서 다른 뷰로 데이터를 전달하는 방법

를 사용하는 경우vue-router와 함께.vue하나의 뷰/컴포넌트에서 다른 뷰/컴포넌트로 데이터를 전달하는 문서화된 방법은 없습니다.

다음의 설정을 실시합니다.

main.filename:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

let routes = [
    {
        path: '/page1',
        component: require('./views/Posts.vue')
    },
    {
        path: '/page2',
        component: require('./views/EditPost.vue')
    }
];

let router = new VueRouter({
    routes
});

new Vue({
    el: '#main',
    router
});

Posts.vue:

<template>
    <div>
        Posts.vue passing the ID to EditPost.vue: {{ postId }}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                allPostsHere: // Whatever...
            }
        }
    }
</script>

포스트 편집vue:

<template>
    <div>
        EditPost.vue received ID from Posts.vue: {{ receivedId }}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                receivedId: // This is where I need the ID from Posts.vue
            }
        }
    }
</script>

주의:ID를 직접 수신할 수 없습니다.EditPost.vue에서 선택할 필요가 있기 때문입니다.Posts.vue.

질문:ID를 뷰/컴포넌트 간에 전달하려면 어떻게 해야 합니까?

루트는 URL을 통해서만 액세스할 수 있으며 URL은 사용자가 URL 바에 입력할 수 있는 것이어야 합니다.따라서 어떤 뷰 컴포넌트에서 다른 뷰 컴포넌트로 변수를 전달하려면 루트 파라미터를 사용해야 합니다.

에 투고 리스트가 있을 겁니다.Posts특정 투고를 편집하기 위해 페이지를 변경합니다.EditPost요소.

가장 기본적인 셋업은 포스트목록에 링크를 추가하여 편집 페이지로 리다이렉트하는 것입니다.

<div v-for="post in posts">
    {{ post.title }}
    <router-link :to="'/post/' + post.id + '/edit'">Edit</router-link>
</div>

경로는 다음과 같습니다.

[
    {
        path: '/posts',
        component: require('./views/Posts.vue'),
    },
    {
        path: '/post/:postId/edit',
        component: require('./views/EditPost.vue'),
        props: true,
    },
]

그props설정 옵션은 루트 파라미터를 컴포넌트 소품으로 변환하도록 라우터에 통지하는 것입니다.자세한 내용은 구성요소를 라우팅하기 위한 소품 전달을 참조하십시오.

그럼 인EditPostID를 수락하고 서버에서 게시물을 가져옵니다.

export default {
    props: ['postId'],

    data() {
        return {
            post: null,
        }
    },

    mounted() {
        this.fetchPost();
    },

    methods: {
        fetchPost() {
            axios.get('/api/post/' + this.postId)
                 .then(response => this.post = response.data);
        },
    },
}

요청이 완료되면EditPost자체 복사본을 가지고 있어 추가 처리가 가능합니다.

모든 투고 편집 시 및 투고 목록을 입력할 때마다 서버에 대한 요구가 필요 없는 경우가 있습니다.필요한 정보는 투고 목록에 이미 있고 요청 간에 변경되지 않기 때문입니다.이러한 경우 성능을 향상시키고 싶다면 Vuex를 앱에 통합하는 것이 좋습니다.이 경우 컴포넌트는 매우 비슷해 보이지만 편집할 게시물을 HTTP 요청을 통해 가져오는 대신 Vuex 스토어에서 가져옵니다.자세한 내용은 Vuex 설명서를 참조하십시오.

URL 표시줄에 매개 변수를 표시하지 않으려면 창을 사용할 수 있습니다.sessionStorage, window.localStorage 또는 vuex 중 하나를 선택합니다.보기를 종료하기 전에 매개 변수를 설정하고 새 보기를 입력한 후 가져옵니다.

소품을 사용할 수 있습니다.<router-view :my-id="parentStoredId"></router-view>app.vue(메인 컴포넌트)에 있는 데이터를 전달합니다.상위 데이터를 변경하려면 하위(게시물)에서 값으로 구성된 사용자 지정 이벤트를 내보내야 합니다.vue, EditPost.vue).

또 다른 방법은 비부모-자녀 통신입니다.

제가 선호하는 방법은 Vux입니다.사용법을 익혀야 해도 앱이 커지면 보답할 수 있습니다.

언급URL : https://stackoverflow.com/questions/45721891/how-to-pass-data-from-one-view-to-another-with-the-vue-router