路由里边的 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列表到详情页的实现的更多相关文章

  1. vue项目实现详情页后退缓存之前的数据

    vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244   一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实 ...

  2. 微信小程序页面列表与详情页跳转的正确姿势

    初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...

  3. Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

    .模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...

  4. vue 默认展开详情页

    { path: '/Tree', component: Tree, children: [ { path: '/', component: Come } ] }

  5. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  6. VUE通过id从列表页跳转到相对的详情页

    新闻列表页面: 在这里我用a标签进行跳转,在vue里面可以这样写<router-link></router-link> 1 <router-link :to=" ...

  7. vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求

    问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...

  8. vue通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定 ...

  9. vue keep-alive 实现详情返回列表保留页面数据

    实现功能 详情页返回列表页,列表页保留上次浏览位置 其它页面进入到列表表,列表页刷新 当详情页有数据改变时,列表页也要更新该条数据 实现思路 用keep-alive保留列表页面数据 activated ...

随机推荐

  1. Windows下安装MySQL压缩zip包

    MySQL 是最流行的关系型数据库管理系统,在WEB应用方面 MySQL 是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之 ...

  2. redis学习总结1

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.和普通的Key-Value结构不同,Redis的Key支持灵活 ...

  3. 【转】eclipse中window->preference选项中没有tomcat的解决方法

    eclipse中window->preference选项中没有tomcat的解决方法 2011-09-09 13:46:35|  分类: eclipse|字号 订阅 其实一共有好几种方法,这只是 ...

  4. 001.SQLServer高可用简介

    一 SQLServer高可用集群相关概念 1.1 Windows故障转移群集 Windows故障转移群集是由多个服务器组成的共同提供某高可用服务,该服务用于防止单台服务器故障导致服务失效.故障转移群集 ...

  5. Machine Learning-KNN

    思路:如果一个样本在特征空间中的k个最相近的样本中大多数属于某个类别,则该样本也属于该类别: 这段话中涉及到KNN的三要素:K.距离度量.决策规则 K:KNN的算法的结果很大程度取决于K值的选择: I ...

  6. Click: 命令行工具神器

    Click是一个Python用来快速实现命令行应用程序的包,主要优势表现在以下三点: 任意嵌套命令 自动生成帮助页 自动运行时lazy加载子命令 示例程序: import click @click.c ...

  7. 文本处理三剑客之gawk

    gawk 作者:Aho, Weinberger, Kernighan 版本: GNU awk:gawk New awk:nawk 简介:格式化文本输出工具,模式扫描及处理语言:报告生成器. 用法:ga ...

  8. CentOS 6.6 x64安装TensorFlow

    CentOS 6.6 x64安装TensorFlow升级Python到2.7(系统自带Python版本为2.6) // 安装编译工具 $ yum -y install gcc automake aut ...

  9. 20165224 陆艺杰 Exp7 网络欺诈防范

    通常在什么场景下容易受到DNS spoof攻击 一样的局域网环境下 在日常生活工作中如何防范以上两攻击方法 使用攻击检查工具 简单应用SET工具建立冒名网站  打开 apache服务 apache 是 ...

  10. CCF201612-1 中间数(二分思想)

    问题链接:CCF201612试题. .对n个数进行排序,找出中间那个数,然后将中间那个数的左右与其相等的数去掉,看左右剩下的数个数是否相等,如果相等则中间那个数就是答案,否在输出-1. 问题描述 问题 ...