VUE通过id从列表页跳转到相对的详情页
新闻列表页面:
在这里我用a标签进行跳转,在vue里面可以这样写<router-link></router-link>
|
1
|
<router-link :to="{path:'/news',query:{ id:item.NewsID }}" class="around"></router-link> |
新闻详情页:
1)首先要获取id
|
1
|
var newsID=this.$route.query.id;6 |
2)拼接到url上面
|
1
|
this.$http.get(this.$store.state.index.ip + '/api/News/'+newsID) |
完整写法:
|
1
2
3
4
5
6
7
8
|
created: function() { var newsID=this.$route.query.id; this.$http.get(this.$store.state.index.ip + '/api/News/'+newsID).then((response) => { console.log(response); }).catch(function(error) { console.log(error); });} |
这样就可以把id传过去啦
VUE通过id从列表页跳转到相对的详情页的更多相关文章
- vue通过id从列表页跳转到对应的详情页
1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定 ...
- 1、找出url汇总页,过滤出满足条件的详情页url;2、去详情页采集信息
1.找出url汇总页,过滤出满足条件的详情页url:2.去详情页采集信息 package main import ( "fmt" "github.com/gocolly/ ...
- 微信小程序--详情页的推荐位置继续打开详情页;返回之后分享等数据不正确问题
问题背景 -- 分享的数据来源 当前在维护的小程序项目使用wepy开发:分享的数据都是通过接口请求后台的形式获得:然后存在了数据data的对象中:类似 定义分享数据 data = { shareDat ...
- Vue+koa2开发一款全栈小程序(9.图书详情页)
1.获取图书详情 1.修改server/controllers/bookdetail.js为 const {mysql}=require('../qcloud') module.exports=asy ...
- Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...
- mui列表跳转到详情页优化方案
原理 因为列表页到详情页是多对一的形式,即列表页的多条数据列表对应的是一个详情页,只是数据不同而:因此,可以在加载列表页时预加载详情页,即创建一个详情页的webview,但是不显示出来,点击列表的时候 ...
- mxonline实战10,课程列表页,课程详情页1
对应github地址:第10天 一. 课程列表页 1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加
- vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实 ...
- React-Native 之 GD (十一)加载更多功能完善 及 跳转详情页
1.加载更多功能完善 GDHome.js /** * 首页 */ import React, { Component } from 'react'; import { StyleSheet, Text ...
随机推荐
- python设计模式第二十天【迭代器模式】
1.不使用迭代器出现的问题 (1)容器承担了太多的功能,一方面提供添加和删除等功能,还需提供遍历访问功能 (2)在容器访问遍历过程中,需要保存遍历状态,当和元素的添加和删除混杂在一起时,容易引起混乱 ...
- Java8 flatMap的sample
外国人写得, 很不错 http://www.java67.com/2016/03/how-to-use-flatmap-in-java-8-stream.html package test; impo ...
- Appium之开发计算器自动化测试脚本Demo
1.依赖包 <!-- https://mvnrepository.com/artifact/io.appium/java-client --> <dependency> < ...
- zh-CN、zh-Hans区别
zh-CN:地区限制匹配规范,表示用在中国大陆区域的中文.包括各种大方言.小方言.繁体.简体等等都可以被匹配到. zh-Hans:语言限制匹配规范,表示简体中文.适用区域范围是全宇宙用中文简体的地方, ...
- GA-H61M-DS2 BIOS SETTING
Boot Option #1,UEFI:Sandisk SDSSDHP128G Boot Option #2, Boot Option #3, Boot Option #4, Bootup Numbe ...
- 51nod 1636
1636 教育改革 我看过题解了还下了数据,表示很惭愧不想说什么,但还是说两句吧 sol: 因为差值很小只有100,所以对数组下标存的是(选择的数值和左端点的差值) f[i][j][k]即为第i天选了 ...
- 2018-南京网络赛icpc-L题(分层最短路)
题意:给你n个点,m条边的有向带权图,然后你每次可以选<=k条边的边权变成0,问你1到n的最短路: 解题思路:这道题基本上就是原题了呀,bzoj2763(无向图),解法就是拆点跑分层的最短路,比 ...
- 微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件
微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件,这个插件名为 Web Activities,功能是跨 Windows 10 和 Microsoft Launcher ...
- CodeForces615B-Longtail Hedgehog-dp/图
记忆化数组记录从这个点的最长下降序列,然后乘以这个点的度,就是ans,维护即可. #include <cstdio> #include <cstring> #include & ...
- 洛谷P1414又是毕业季二题解
题目 思想: 首先这个题必定是一个数学题,肯定不是一个一个枚举得到解,这样肯定会T,所以我们就应该想一些别的方法,. 分析: 比如,答案,一定是递减的,因为该答案所满足的条件肯定是越来越苛刻的,所以我 ...