vue列表到详情页的实现
路由里边的 router/index.js path:'/detail/:id' 动态id
列表页渲染时:
:to="'/detail/'+item.id" ===>id是指请求文章列表的id,可以是aid,bid等等 请求列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 点击进入路由变http://localhost:8080/#/detail/456 详情页需要请求文章详情的接口 http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=456, 传入 this.$route.params.id 和路由里面一样的id写死 mounted(){ var aid=this.$route.params.id;
//console.log(aid) //调用请求数据的方法 this.requestData(aid);
},
methods:{ requestData(aid){ //get请求如果跨域的话 后台php java 里面要允许跨域请求 var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid; this.$http.get(api).then((response)=>{
console.log(response); this.detail=response.data.result[]; //根据数据结构赋值 },(err)=>{ console.log(err)
})
}
}
vue列表到详情页的实现的更多相关文章
- vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实 ...
- 微信小程序页面列表与详情页跳转的正确姿势
初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...
- Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...
- vue 默认展开详情页
{ path: '/Tree', component: Tree, children: [ { path: '/', component: Come } ] }
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- VUE通过id从列表页跳转到相对的详情页
新闻列表页面: 在这里我用a标签进行跳转,在vue里面可以这样写<router-link></router-link> 1 <router-link :to=" ...
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...
- vue通过id从列表页跳转到对应的详情页
1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定 ...
- vue keep-alive 实现详情返回列表保留页面数据
实现功能 详情页返回列表页,列表页保留上次浏览位置 其它页面进入到列表表,列表页刷新 当详情页有数据改变时,列表页也要更新该条数据 实现思路 用keep-alive保留列表页面数据 activated ...
随机推荐
- socket消息发送
expressClient.html <html><head><meta http-equiv="Content-Type" content=&quo ...
- elasticsearch 复合查询
常用查询 固定分数查询 127.0.0.1/_search(全文搜索) { "query":{ "match"{ "title":" ...
- [原创]Devexpress XtraReports 系列索引
该系列已经完结...以后如果有高级功能,会再开一个新的系列,该系列是比较基础的报表应用..谢谢大家一直的支持. [原创]Devexpress XtraReports 系列 1 创建静态报表 Demo地 ...
- cocos2dx之lua绑定简析
一.总原则:c++对象的生命期不依赖lua gc管理,手动创建的对象要手动销毁 二.引擎层在设计上就是支持脚本概念的(也就是说脚本的使用是“侵入式”的),与lua打交道的代码都封在CCLuaEngin ...
- java String编码转换
/** * Get XML String of utf-8 * * @return XML-Formed string */ public static String getUTF8XMLString ...
- Eclipse插件无法识别的解决方法汇总
参考 http://www.cnblogs.com/apollolee/archive/2013/06/18/3142243.html
- Java web错误汇总
环境: 电脑:win 10 IDE: Eclipse Java EE IDE for Web Developers. Version: Luna Service Release 2 (4.4.2) B ...
- 源代码实现一个binary例子
一.源代码实现一个binary例子 1.例子描述 (1) 数据描述 输入数据X是二进制的一串序列, 在t时刻,有50%的概率是1,50%的概率是0,比如:X=[1,1,0,0,1,0.....]输出数 ...
- Java:基本语法
Java语言是由类和对象组成的,其对象和类又是由变量和方法组成,而方法,又包含了语句和表达式. 1. 变量 Java语言提供了两种变量:成员变量和局部变量 成员变量:是在方法体外的类中声明和定义的,可 ...
- 41.QT-多线程与界面之间交互总结
1. 线程与界面组件需要注意的地方 在QThread线程中不能直接创建QWidget之类的界面组件. 因为在QT中,所有界面组件相关的操作都必须在主线程中(也就是GUI thread) 所以, QTh ...