小编Mer*_*isL的帖子

我在将 socket.io 数据传递给 vuejs 元素时遇到问题。我浏览了几次 Vue 文档，但找不到解决方案。基本上，我有一个通过 socket.io 发送到客户端的数据，console.log 完美地打印了它。现在我想使用 Vue 来渲染带有该数据的 html 元素，但是我在将 socket.io 数据传递给它时遇到了问题。

在 Vue 文档中有一个示例，说明如何使用静态数据输入进行操作。

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

所以我发现我需要为此将我的数据对象转换为字符串。我为此使用了 JSON.stringify()。

var socket = io.connect('http://192.168.1.10');
socket.on('posts', function (datasocket) {
  var st = JSON.stringify(datasocket);
  var blogposts = new Vue({
    el: '#blogpost',
    data: {
      items: st
    }
  })
});

和 HTML

  <div id="blogpost">
    <div v-for="item in items" class="card" style="width: 20rem;"> …

我在每条路径上都显示组件有问题，因为React Router 4没有对该路由使用确切的路径（或因此出现）。

<Route path="/" exact component={Explore} />
<Route path="/about" component={About} />

// The one making problems
<Route
    path="/:username"
    exact={true}
    render={props => <Profile {...props} />}
/>

因此，当我转到http://example.com/about时，我的Profile组件仍在呈现中。我猜问题出在路由中，因为它期望参数，:username并且在/（root）之后就出现了。难道我做错了什么？我可以为添加一条其他路线/:username，例如/profile/:username，但如果可能的话，我希望保持原样。