vue-router의 "$router.push()"에 사용자 지정 데이터 전달

vue-router의 "$router.push()"에 사용자 지정 데이터 전달

추가 데이터 전송 방법이 있습니까?$router.push()param 또는 query로 등록되어 있지 않다.그러면 URL을 통해 전달할 방법이 없기 때문에 프로그램 탐색을 통해 액세스한 것을 다음 페이지에서 인식할 수 있습니다.

this.$router.push({
   path: '/next-page', 
   params: {...}, 
   query: {...}, 
   moreData: {foo: 1}
})

그리고 나서/next-page:

this.$route.moreData.foo // 1

현재 사용하고 있는 것은$store다루다moreData

해결책을 찾았어요Vue-router 문서에는 다음과 같은 메모가 있습니다.

주의:params이 경우 무시되다path제공...그 대신에, 다음의 정보를 제공할 필요가 있습니다.name

따라서 다음과 같은 경로를 사용하여 탐색하는 경우 커스텀 데이터를 전달할 수 있습니다.

$router.push({name: 'next-page', params: {foo: 1}})

// in /next-page
$route.params.foo // 1

이 경우 redirect라는 이름을 사용했지만 대상 경로에 경로별 리다이렉트가 있기 때문에 커스텀 파라미터를 수신할 수 없었습니다(이 경우 제공된 파라미터가 손실되었습니다).

따라서 "path redirect"에서 "named redirect"로 변경해야 했지만 "path redirect"에는 경로에 추가 데이터가 포함되어 있기 때문에 "name redirect"를 통해서도 해당 데이터를 전달해야 합니다.

그래서 이 경우 파라미터를 유지하는 도우미 "redirectByName" 함수를 갖게 되었습니다.

redirectByName 입니다.js

//redirects by preserving params
export default (name, params = {}) => {
    return (route) => ({
        ...route,
        name,
        params: {
            ...route.params,
            ...params
        }
    })
}

다음으로 사용 예를 제시하겠습니다.

마이루트js

    import redirectByName from "./redirectByName";
    ...
    export default return [
        {
            path:'some/path',
            name: 'targetRouteName',
            redirect:redirectByName('redirectRouteName', {tab: 'general'}), //optional additional parameters for redirection
        }, 
        {
            path:'some/path/:tab', 
            name: 'redirectRouteName'
        }]

그redirectByName기본적으로 목표를 달성하다route전달된 모든 데이터를 보존하는 개체, 해당 개체 재정의name매개 변수와 제공된 매개 변수를 결합합니다.그런 다음 최종 루트 개체를 전달하여 리다이렉트를 수행합니다.

언급URL : https://stackoverflow.com/questions/52640587/pass-custom-data-to-router-push-in-vue-router