Vue js에서 여러 페이지(컴포넌트)를 동적으로 사용

Vue js에서 여러 페이지(컴포넌트)를 동적으로 사용

사용하고 있다Laravel Nova를 사용하는 커스텀툴vue js커스텀 기능을 제공합니다.

이 있습니다.tool.vue모든 것이 거기서 처리되는 컴포넌트 내의 파일입니다.문제는 다른 템플릿(vue 파일)을 가지고 필요할 때 렌더링하고 싶다는 것입니다.

이 경우 나의 메인tool.vue완전히 구현한 드롭다운 검색입니다.하지만 나는 다른 결과들의 목록을 렌더링하고 싶다.vue버튼을 클릭한 후 파일을 작성합니다.(물론 다른 vue 파일은 데이터를 표시하기 위한 테이블이나 다른 것으로 구성됩니다).

문제는 vue js를 사용하여 이 문제를 어떻게 처리하고 컴포넌트 간에 어떻게 변경할 수 있는가 하는 것입니다.또한 어떻게 하면 메인 vue 파일에서 결과 페이지로 파라미터/데이터를 전달하여 Ajax 요청 등을 수행할 수 있는가 하는 것입니다.

페이지를 동적으로 SPA 형식으로 처리하려면 적절한 라우터를 사용하는 것이 좋습니다.그런 것 같다Laravel Nova사용하고 있다vue-router.

커스텀 컴포넌트를 작성할 때 커스텀컴포넌트에 인스톨 됩니다.다른 vue 파일을 사용하거나 다른 vue 파일을 전환하려면 다음 항목에 루트를 추가해야 합니다.nova-components\[your-component-name]\resources\js\tool.js다음 형식의 루트 배열에 개체를 추가하여 파일을 만듭니다.

{
        name: '[route-name]',
        path: '/[route-path]/:[sent-prop-name]',
        component: require('./components/[your-vue-file]'),
        props: route => {
            return {
                [sent-prop-name]: route.params.[sent-prop-name]
            }
        }
},

이 파일에 라우터를 추가한 후 언제든지 사용할 수 있습니다.<router-link></router-link>Vue 파일 내의 컴포넌트를 사용하여 원하는 경로로 리디렉션할 수 있습니다(데이터를 소품으로 경로에 전송할 수도 있습니다).주요 형식은 다음과 같습니다.

    <router-link
                class="btn btn-default btn-primary"
                target="_blank"
                :to="{
                          name: '[destination-route-name]',
                          params: {
                                     [your-data-name]: [your-data-value]
                          }
                 }"
                 :title="__('[your-title]')"
     >

      Submit                  

     </router-link>

추신: 물론 파일에 데이터를 송수신할 생각이 없다면 양쪽에서 소품이나 패러머를 생략할 수 있습니다.

추신: 언제든지 볼 수 있습니다.vue-router더 많은 기능을 보강 여기.

언급URL : https://stackoverflow.com/questions/53260662/using-multiple-pages-components-dynamically-in-vue-js