CODEWITHSUNDEEP
javascriptvue.jsvue-routervue-props
fguillen
fguillen

Reputation: 38772

Vuejs, how to pass props to a Component rendered by Router?

I new in Vuejs, so apologize this is a newbie question.

I have added a router to my App and I would like to render data from my main App into my Components templates but it is not working.

This is what I have:

Vue.use(VueRouter);

const Text = { props: ['text'], template: '<div>This is the text: {{text}} </div>' }

const routes = [
  { path: '*', component: Text, props: true }
]

const router = new VueRouter({
  routes: routes
})

new Vue({
  router: router,
  el: "#app",
  data: {
    text: "Hello there!"
  }
})

I was expected the text prop to be linked to my App.data.text but it is not happening.

Here is a jsfiddle: https://jsfiddle.net/fguillen/psqztn93

Upvotes: 0

Views: 744

Answers (2)

Gander
Gander

Reputation: 1991

const Text = {
  props: ["text"],
  template: "<div>This is the text: {{text}} </div>"
};

const routes = [{ path: "*", component: Text }];

const router = new VueRouter({
  routes: routes
});

new Vue({
  router: router,
  el: "#app",
  data: {
    text: "Hello there!"
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.js"></script>

<div id="app">
  <router-view :text="text"></router-view>
</div>

Upvotes: 1

grodzi
grodzi

Reputation: 5703

You may want to forward the props via router-view (which here passes text to the rendered component Text)

<router-view :text="text"></router-view>

Upvotes: 1

Related Questions