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 ...
随机推荐
- fiddler学习笔记2 字段说明;移动设备、解密证书
# : 抓取顺序从1开始递增 result: http 请求状态 protocol: 请求使用的协议如:http https ftp Host: 请求地址 ...
- 解决 Redis 只读不可写的问题
本文转载:https://blog.csdn.net/han_cui/article/details/54767208?tdsourcetag=s_pcqq_aiomsg 解决 Redis 只读不可写 ...
- Bootstrap之表格、表单应用
代码: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml&q ...
- WebStorm开发React项目,修代码之后运行的项目不更新
昨天遇到一个恶心的问题,我新建了一个React.js项目,想做一点关于Pc端的开发,习惯性的用了WebStorm,可是发现一个问题,就是代码修改之后,浏览器上根本不会刷新.然后,我把方向定位在没有正确 ...
- openblas下载安装编译
编译好的库: https://github.com/JuliaLinearAlgebra/OpenBLASBuilder/releases 源码编译 下载:https://github.com/xia ...
- Y7000联想拯救者gtx1050Ti安装cuda9.0
安装cuda经常会遇到安装失败的问题,原因大部分都是由于驱动不一致引起的,接下来我们分两步讲解 1. 安装驱动失败 原因:nvidia官网提供的驱动都是通用的,针对特殊设备可能出现不兼容问题,方法很简 ...
- rediret 加/与不加/的区别
- React 学习(四) ---- 生命周期函数
现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...
- 51nod1016
1016 水仙花数 V2 1 秒 131,072 KB 160 分 6 级题 水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3 ...
- 红米Note 7 Pro在印度首销迅速售罄
3月13日消息,红米Note 7 Pro在印度率先发售. 小米印度业务负责人Manu Kumar Jain发推特表示,红米Note 7 Pro开售几秒钟就被抢光,我们的工厂正在加班加点工作,全力以赴提 ...