vue 라우터 뷰에 데이터를 전달하는 방법

vue 라우터 뷰에 데이터를 전달하는 방법

Vue Router를 사용하고 있습니다.내 코드에는 다음과 같은 것이 있었다.

<div v-bind:is="page.component_name" v-bind:page="page"></div>

어느 쪽이 효과가 있었고page데이터가 컴포넌트에 전달되었습니다.하지만 라우터 뷰에서도 같은 작업을 하려면 어떻게 해야 하나요?이 방법은 효과가 없는 것 같습니다.

<router-view v-bind:page="page"></router-view>

js:

var vm = new Vue({
    ...,
    router : new VueRouter({
        routes : [
            { path: '/foo', component: { template: '<div>foo</div>', created:function(){alert(1);} } },
            //{ path: '/bar', component: { template: '<div>bar</div>', created:function(){alert(2);} } },
            { path: '/bar', component: Vue.component("ti-page-report") }
        ]
    }),
     ...
});

vue-router소품 전달 방법에 대한 전용 페이지가 문서에 있습니다.router-view.

소품을 경로 구성요소로 전달

문서의 스니펫 예:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

     // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

간단한 사용을 원하신다면,props모든 컴포넌트에 전달되는 것과 동일한 방법으로 전달될 수 있습니다.단, 루트 렌더링에 사용되는 컴포넌트(루트 정의에 지정된 컴포넌트)는 소품을 수신할 것으로 예상됩니다.

다음은 간단한 패스 사용 예시입니다.props로.router-view:

송신되는 소품에 액세스 할 필요가 있는 컴포넌트("ti-page-report")는, 다음의 컴포넌트를 추가할 필요가 있습니다.

<template>
  <div>
    <h1>Now you can access page: {{ page }}</h1>
  </div>
</template>

export default {
  name: "TiPageReport",
  props: ['page'], // can now be accessed with this.page
  ...
};

소품을 올바르게 사용하는 방법에 대해서는, https://vuejs.org/v2/guide/components-props.html 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/53034586/how-to-pass-data-to-vue-router-router-view