javascript - How to pass data to vue router router-view? - Stack Overflow

admin管理员组

文章数量:1334692

Im using Vue Router. In my code I used to have:

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

Which worked, and the page data was passed to the ponent. But how do I do the same with a router-view? This doesn't seem to work:

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

js:

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

Im using Vue Router. In my code I used to have:

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

Which worked, and the page data was passed to the ponent. But how do I do the same with a router-view? This doesn't seem to work:

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

js:

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

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

Share Improve this question Follow edited Oct 28, 2018 at 18:05 Cortex0101 92722 gold badges1313 silver badges3333 bronze badges asked Oct 28, 2018 at 18:03 omegaomega 44k9090 gold badges285285 silver badges522522 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

vue-router has a dedicated page in docs on how to pass props to router-view.

Passing Props to Route Components

Example snippet from docs:

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

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

If you are looking for simplified usage, props can still be passed the same way they are passed to any ponent. But ponent that is used for rendering the route (the one that is specified in route definition) should expect to receive the props.

Here is simple usage example of passing props to router-view:

I personally decided to use provide/inject feature: preserving reactivity with minimal overhead.

The ponent ("ti-page-report") that needs to access the props being sent just needs to add it:

<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
  ...
};

See https://v2.vuejs/v2/guide/ponents-props.html for how to use props properly.

本文标签： javascriptHow to pass data to vue router routerviewStack Overflow