Vue Props 值未在简单测试中通过答案

【问题标题】：Vue Props values not passed in simple testVue Props 值未在简单测试中通过
【发布时间】：2019-11-10 06:02:42
【问题描述】：

我是使用 VUE 的新手，我正在测试一个简单的 vue-router，但道具在此测试中不起作用。

<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>'
  }
})

以及如何在prop HTML代码中传递路由器链接？

【问题讨论】：

你没有在任何地方传递道具值？
这是我的问题...
prop 中的 HTML 代码是通过单击挂载钩子中的侦听器来处理的，而不是路由器链接，我使用了一个标准的标签，该标签必须作为完美 JSON 格式的数据集来将参数传递给侦听器。附加的 JSFIDDLE 已更新。显然，我也修复了丢失的传递数据，但这是一个误解，感谢您的注意：D

标签： vue.js

【解决方案1】：

你需要在 routes 属性中添加 props 属性

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

还需要在 router-link 中传递 prop 值

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

【讨论】：

谢谢，这是正确的！现在它可以工作了jsfiddle.net/uncoke/92x0jhr1
在 vue-router 中使用“props: true”属性可以访问一个 prop。谢谢！很有帮助！