Vue JS 路由器 & 动态更新路由内容

Question

我目前正在使用 Vue Router 创建客户端 Vue JS 应用程序。为了给你一点历史，应用程序加载了一个存储在服务器上的 json 文件来显示数据。此文件会定期更新，我想重新加载文件并更新视图。

忽略数据文件的提取（这一点没问题），当我设置新的数据提取并使用基本 Vue 示例更新数据时，它按预期工作。

但是，当我引入Vue Router时，visible更新的数据不显示。对结果（甚至 router/vue 实例）执行 console.log 会显示新的数据更改，但 HTML 不会更新以反映更改。

我正在使用 Vue 2（相当新）并且所有 documentation/examples 都指向更新页面导航上的数据并使用 Node（我没有这样做）。

我用我正在做的事情的基本过程模拟了一个简单的 JS bin。可以看到在newData数组中，第一项的名称和百分比变化了。

http://jsbin.com/jeseden/edit?js,output

非常感谢任何帮助。

Answer 1

您的代码无法像在 ListingCompo 组件中那样工作，您正在初始化数据，但它不知道以后的更改。要稍后也反映更改，您需要将观察器放在父数据上，或者只是计算属性，只要您的父数据发生变化，它就会发生变化。

var ListingCompo = {
    template: '#template',
    data: function () {
        return {            
        }
    },
    computed: {
      records(){
        return  this.$parent.records
     }      
   }
};

工作jsbin。

Answer 2

正确的做法实际上是 props。

博客里有详细介绍post我写的主题是：

https://www.liquidlight.co.uk/blog/article/building-a-vue-v2-js-app-using-vue-router/

在 jsbin

上找到了示例

Vue JS 路由器 & 动态更新路由内容

Vue JS router & updating route content dynamically

javascript

vue.js

vue-router

vuejs2