VUE通过id从新闻列表跳转到相对的新闻详情

新闻列表页面:

  在这里我用a标签进行跳转,在vue里面可以这样写<router-link></router-link>

  <router-link :to="{path:‘/news‘,query:{ id:item.NewsID }}" class="around"></router-link>

新闻详情页:

  1)首先要获取id

  var newsID=this.$route.query.id;

  2)拼接到url上面

  this.$http.get(this.$store.state.index.ip + ‘/api/News/‘+newsID)

  

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传过去啦

时间: 2024-10-05 05:50:02

VUE通过id从新闻列表跳转到相对的新闻详情的相关文章

桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就只能去官网查阅文档,现在通过实现下面的两个功能才真正了解什么是前端的MVVM框架. 另外,总结下我理解中的MVVM框架:后台php是MVC框架,一直做法是php处理数据,然后把数据渲染到模板,然后后台返回html页面给浏览器, 现在前端mvvm(model-view-viewmodel)就是:mod

css如何去掉新闻列表最后一个新闻的下划线

css如何去掉新闻列表最后一个新闻的下划线:本章节分享一个比较使用的效果,那就是如何去掉新闻列表最后一个新闻的下划线.在很多新闻列表效果中,在每一个新闻下面都有一个虚线或者其他什么形式的下划线,总之感觉有比较美观的,但是往往最后一个新闻是不需要这个下划线的,下面介绍一下如何实现此效果.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="

jeecms网站中的新闻列表前边的图片是可以修改的

1.对于有要求的栏目,比如网站首页的悬浮对联,按照要求,在首页有四个位置,并且可以选择是否展示.管理员自己添加信息.这种情况下就需要建立一个新的模型. 2.建立的模型id是6,按照需要设置了栏目模型和内容模型.然后添加对应该模型的栏目.然后对添加的栏目,添加信息. 3.添加的信息展示出来的新闻列表图标和其他新闻不一致: 4.找到这个list页面 发现对应模型id,分别对应不同的图片. 5.解决方法,可以修改数字 9,或者可以之前找到对应的图片,然后用自己需要的来替换. 缺点就是模型id不易变动,

Fragment在Activity中跳转,实现类似新闻标题跳转新闻内容功能

1.准备的工作,新闻数据类,新闻数据适配器,适配器的布局: News.java package com.example.zps.fourfragmentbestpractice; /** * Created by zps on 2015/9/1. */ public class News { private String title; private String content; public String getTitle() { return title; } public void se

jQuery循环滚动新闻列表

最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>      <head> <meta http-equ

Vue学习笔记进阶篇——列表过渡及其他

本文为转载,原文:Vue学习笔记进阶篇--列表过渡及其他本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag

【JavaWeb】MVC案例之新闻列表

MVC案例之新闻列表 作者:白宁超 2016年6月6日15:26:30 摘要:本文主要针对javaweb基本开发之MVC案例的简单操作,里面涉及mysql数据库及表的创建,以及jsp页面和servlet的操作,整个操作流程进行梳理.其中涉及的概念问题,不在一一详述.对于整个操作流程按照开发顺序创建.(本文原创,转载标明出处:MVC案例之新闻列表). 实验准备: 1  win*系统,一般配置笔记本或者台式机 2  安装MyEclipse开发平台,本实验使用MyEclipse2015(点击下载) 3

用客户端模型访问SharePoint数据制作网站新闻列表

用客户端模型访问SharePoint数据 在用客户端模型访问SharePoint数据首先要添加两个引用,一个是Microsoft.SharePoint.Client,另一个是Microsoft.SharePoint.Client.Runtime 在程序要引用Microsoft.SharePoint.Client命名空间 1.下面是一个简单的例子访问SharePoint列表的数据,读取的是列表名称为新闻列表,其中 ClientContext ct = new ClientContext("http

Asp.net新闻列表生成静态页批量生成和单页生成

其实生成静态页的目的就是为了提高用户的体验度,访问速度快,这是最直接的目的.... 前期准备,需要新建一个文件夹..前台展示:/new/default.aspx  这个页面放的就是动态的新闻列表数据. 先看截图.. 上代码 这里要说明一下,我用的AspNetPager分页控件,需要设置一下 <webdiyer:AspNetPager ID="AspNetPager1" runat="server" FirstPageText="首页" La