Question

我有一个使用vue-router的vuejs app，路由如下。

const routes = [
  { path: '/list', component: list, alias: '/' },
  { path: '/resources/:id?', component: resources },
  { path: '/emails', component: emails },
  { path: '/list/:id', component: editHousehold, props: true },
  { path: '/list/turn-off/:id', component: editHousehold, props: true }
]

第一次页面加载启动事件调用/资源没有“：id”，页面加载资源列表（见下文）。

start: function () {
  this.$http.get('/resources')
    .then((res) => {
      let gdriveInfo = res.data;
      this.files = gdriveInfo.files;
    }
    );
},

资源1

资源2

Rescouce3

...

当用户点击列表中的一个资源时，我希望调用/ resources / 1，以便可以加载和显示不同的资源数据集。

我有一个文件点击事件附加到每个资源，其中“id”被附加到路径。这将调用服务器端模块，该模块将检索新数据，该数据将替换组件中的“文件”数据，这些数据可能会导致vuejs“反应”并更新页面内容。

onFileClick: function (id, mimeType, event) {
  const _this = this;
  this.$http.get('/resources/' + id)
    .then((res) => {
      let gdriveInfo = res.data;
      this.files = gdriveInfo.files;
    }
    );
}

但是，上面的调用不会启动对服务器模块的调用。

this.$http.get('/resources/' + id)

我也试过

this.$router.push('/resources/' + id)

哪个不起作用。

对vuejs不熟悉，任何有关如何实现此功能的帮助都将不胜感激。

Answer 1

你缺少主持人，因为这个。$ http.get（＆＃39; / resources /＆＃39; + id）是你的组件资源，这不是json ......

Answer 2

您好像没有正确地进行REST调用。我认为你的路由和REST调用混淆了。您在上面显示的是路由而不是调用服务器。

您未在此处呼叫服务器： this.$http.get('/resources/' + id)

这样做只是为了路由：
this.$router.push('/resources/' + id)

使用axios进行REST调用：
https://github.com/axios/axios

如何使用新数据启动Vuejs页面元素的刷新？

2 个答案: