我有一个vuejs应用程序使用vue-router与以下路由 .
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的新手，任何有关如何实现此功能的帮助将不胜感激 .
2 回答
你缺少主机，因为这 . $ http.get（'/ resources /'id）是你的组件资源，这不是json ...
看起来你没有正确地进行REST调用 . 我认为你正在混淆路由和REST调用 . 您在上面显示的是路由不调用服务器 .
你没有在这里调用服务器：
this.$http.get('/resources/' + id)这样做只是为了路由：
this.$router.push('/resources/' + id)看看使用axios进行REST调用：
https://github.com/axios/axios