vue.js - Vue Props values not passed in simple test

Question

I'm new using VUE and I was testing a simple vue-router but props are not working in this test.

Here the test on jsfiddle

<div id="app">Menu: 
 <router-link to="/">Home</router-link> | 
 <router-link to="/post">Post</router-link> | 
 <router-link to="/foo">Foo link comment</router-link>
 <router-view></router-view>
 </div>


const Home = { template: '<div class="page">Welcome to my Home <router-link :to="{name:'foo'}">this link</router-link></div>' }

const Foo = { 
    props:['comment', 'msg'],
    template: '<div class="page">{{msg}} Here the comment:<hr><div v-html="comment"></div><hr>Go back to <router-link :to="{name:'home'}">home</router-link></div>' }

const router = new VueRouter({
     mode: 'history',
     routes: [
        { path: '/', name:'home',component: Home },
        { path: '/foo', name:'foo', component: Foo }],
   })


 new Vue({
  router,
  el: '#app',
  data: {
     msg: 'Hello World',
     comment : '<div class="comment">This is a <strong>bold</strong> link</div>'
  }
})

And how to pass the router link in prop HTML code?

Answer 1

You need to add props property in routes attribute

{ path: '/foo', name:'foo', component: Foo , props: true}

Also you need to pass prop value in router-link

<router-link :to="{ name: 'foo', 
      params: { comment: comment,msg: msg }}">Foo link comment</router-link>