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 ...
随机推荐
- SpringBoot04 项目热部署详解
1 热部署 优点:适用于本地和线上.无需重启服务器 2 热部署和热加载的联系和区别 2.1 联系 不用重启服务器就可以编译和部署项目 都是基于Java的类加载器实现 2.2 字面区别 热部署在服务器运 ...
- storm操作zookeeper源码分析-cluster.clj
storm操作zookeeper的主要函数都定义在命名空间backtype.storm.cluster中(即cluster.clj文件中).backtype.storm.cluster定义了两个重要p ...
- 功防技术与实践第1.2章,kali初步了解
20169314 2016-2017-2 <网络攻防实践>/<网络攻击与防范>第2周学习总结 一.教材学习内容总结 1.hacker和cracker的区别 网络攻防分三部分:系 ...
- C# 写 LeetCode easy #26 Remove Duplicates from Sorted Array
26.Remove Duplicates from Sorted Array Given a sorted array nums, remove the duplicates in-place suc ...
- RedisUtil(未完,持续更新中....)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 输入类型<input type="number"> / input标签的输入限制
输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...
- All Roads Lead to Rome(30)(MAP【int,string】,邻接表,DFS,模拟,SPFA)(PAT甲级)
#include<bits/stdc++.h>using namespace std;map<string,int>city;map<int,string>rcit ...
- 【转】C# String 前面不足位数补零的方法
源地址:http://www.cnblogs.com/zhangqs008/archive/2012/02/01/2341078.html
- 2017-10-2 清北刷题冲刺班a.m
一道图论神题 (god) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,只 ...
- 开发外包注意事项二——iOS APP的开发
目前我的方式是按时间算. 首先这得建立在双方的信任基础上. 以我做过的Case为例: 首先会和客户一起评估需求: 1. 哪些功能是最为重要的 2. 哪些功能是可以删除的 3. 用什么策略保证APP的出 ...