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 ...
随机推荐
- Java权限访问修饰符
私有的,以 private 修饰符指定,在同一类内可见. 默认的,也称为 default,在同一包内可见,不使用任何修饰符. 受保护的,以 protected 修饰符指定,对同一包内的类和所有子类可见 ...
- DeepLearning网络设计总结
检测网络: 1. tiling层可以减少计算量,deconvolution相比tiling性能要好一些
- Windows Server2008、IIS7启用CA认证及证书制作完整过程
1 添加活动目录证书服务 1.1 打开服务器管理器,右键点击角色,选择“添加角色”,在“添加角色向导”窗口左侧面板选择“服务器角色”,然后勾选“Active Dire ...
- codeforces630C
Lucky Numbers CodeForces - 630C 小希称只含7和8的数是幸运数,那么不超过n位的幸运数有多少个? Input 一个整数 n (1 ≤ n ≤ 55) Output 输出幸 ...
- IDEA下载依赖时提示 resolving dependencies of xxx, yyy
IDEA下载依赖时提示 resolving dependencies of xxx, yyy ,卡住不动 使用Maven命令可以更清楚地分析问题,在IDEA命令行窗口执行mvn compile命令,提 ...
- load加载层-layui
加载样式 //eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = laye ...
- Linux下tomcat中多项目配置druid报错的问题
这里有多种方法,推荐修改tomcat配置,即在启动JVM配置中设置如下: -Ddruid.registerToSysProperty=true 详解参见该博: https://blog.csdn.ne ...
- JQ用法
jQuery简称jq,是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jq可以帮你达到目的!下 ...
- P1164 小A点菜
原题链接 https://www.luogu.org/problemnew/show/P1164 此题是一道简单的动规问题 才学两天不是很熟练,我苦思冥想看着题解终于想出来了. 主要的思路如下: 我们 ...
- Minimum number of steps CodeForces - 805D(签到题)
D. Minimum number of steps time limit per test 1 second memory limit per test 256 megabytes input st ...