vue2.0 仿手机新闻站（六）详情页制作

1.结构

2.配置详情页路由

router.config.js

/**

 * 配置 路由

 */

// 导入组件

import Home from './components/Home.vue'

import Follow from './components/Follow.vue'

import Column from './components/Column.vue'

import UserInfo from './components/UserInfo.vue'

import Article from './components/Article.vue'

// 导出路由数组

export default [

	{ // 首页

		path:'/home',

		component:Home

	},

	{ // 关注页

		path:'/follow',

		component:Follow

	},

	{ // 栏目页

		path:'/column',

		component:Column

	},

	{ // 我的页

		path:'/user-info',

		component:UserInfo

	},

	{ // 文章详情页

		path:'/article/:id',

		component:Article

	},

	{ // 配置默认路由

		path:'/',

		redirect:'/home' // 路由重定向

	},

	{

		path:'*',

		redirect:'/home' // 路由重定向

	}

]

3.通过 router-link路由 跳转详情页

Home.vue

<!-- 首页 -->

<template>

	<div id="home">

		<div class="content mt30">

			<div class="newsList">

				<ul>

					<li v-for="(item,index) in arrList">

						<!-- 通过 router-link路由 跳转详情页 -->

						<router-link :to="'/article/'+item.id">

							<h2>{{index}}.{{item.title}}</h2>

							<p>{{item.detail}}</p>

						</router-link>

					</li>

				</ul>

			</div>

		</div>

	</div>

</template>

<script>

	export default{

		data(){

			return {

				arrList:[]

			}

		},

		mounted(){

			// 获取数据

			this.fetchData();

		},

		methods:{

			fetchData(){

				var _this = this;

				// this 为 vue的实例

				this.$http.get('src/data/index.data').then(function(res){

					_this.arrList = res.data;

				}).catch(function(err){

					console.log('Home',err);

				});

			}

		}

	}

</script>

<style scoped>

	.mt30{

		margin-top: 30px;

	}

</style>

4.通过 正则 获取 path 中的 id, 并 通过 id 获取该详情页信息

Article.vue

<!-- 文章详情页 -->

<template>

	<div id="article">

		<div class="nav">

			<ul>

				<li class="l-btn" onclick="window.history.go(-1)"></li>

			</ul>

		</div>

		<!-- 内容部分 -->

		<div class="content">

			<div class="header clear">

				<h2><img :src="articleData.author_face" alt="" /></h2>

				<p>百度</p>

			</div>

			<div class="cont">

				<h3>{{articleData.title}}</h3>

				<div class="time">

					<p>{{articleData.time}}<span><img src="../assets/img/zan.png" alt="" /></span></p>

				</div>

				<div class="text-box" v-html="articleData.content"></div>

			</div>

		</div>

		<!-- 底部 -->

		<div class="foot-btn">

			<ul>

				<li class="say"><a href="javascript:;">

					<i></i><span>0</span>

				</a></li>

				<li class="zan"><a href="javascript:;">

					<i></i><span>0</span>

				</a></li>

				<li class="xing"><a href="javascript:;">

					<i><img src="../assets/img/xing.png" alt="" /></i>

				</a></li>

				<li class="fx"><a href="javascript:;">

					<i><img src="../assets/img/fx.png" alt="" /></i>

				</a></li>

			</ul>

		</div>

	</div>

</template>

<script>

	export default{

		data(){

			return{

				// articleData 是个json

				articleData:{}

			}

		},

		mounted(){

			// console.log(this.$route.path); 例如: /article/1

			// 获取 path 中的id

			var reg = /\/article\/(\d+)/;

			var id = this.$route.path.match(reg)[1];

			console.log(id);

			this.fetchData(id);

		},

		methods:{

			fetchData(id){

				var _this = this;

				this.$http.get('../src/data/article.data').then(function(res){

					_this.articleData = res.data[id];

				}).catch(function(err) {

					console.log('文章详情页',err);

				})

			}

		}

	}

</script>

<style scoped>

	html,body{ overflow-x: hidden; }

	.nav{width:100%; position:fixed;top:0;left:0; background:#fff; border-bottom:1px solid #e8eaec; z-index:99;}

	.nav ul{width:6.4rem;height:0.45rem; padding-top:0.15rem; margin:0 auto;}

	.nav ul li{width:0.29rem;height:0.31rem; background:url(../assets/img/history.png) no-repeat 0 0; background-size:100%; margin:0 0 0 0.38rem;}

	.content{max-width:6.4rem; margin:0 auto; margin-top:0.6rem; background:#f2f4f5; padding-bottom:0.85rem;}

	.content .header{ padding:0.39rem 0.28rem 0.15rem 0.28rem; height:auto; background: none}

	.header h2{ float:left; margin-right:0.18rem;}

	.header p{ float:left; margin-top:0.18rem; font-size:0.3rem;}

	.content .cont{ padding:0 0.38rem; color:#494d4d;}

	.cont h3{ font-size:0.4rem; line-height:0.6rem; padding-bottom:0.25rem; border-bottom:1px solid #494d4d;}

	.cont .time{height:0.24rem; line-height:0.24rem; margin:0.26rem 0; }

	.time p{ float:left;position:relative;}

	.time span{width:0.33rem;height:0.32rem; position:absolute; top:-0.02rem;right:-0.35rem;}

	.time span img{width:100%;height:100%;}

	.cont .text-box{ font-size:0.25rem;}

	.text-box p{ line-height:0.45rem; margin-bottom:0.1rem;}

	.foot-btn{width:100%;height:0.8rem; background:#fff; border-top:1px solid #e8eaec; position:fixed; left:0;bottom:0;}

	.foot-btn ul{width:6.4rem; margin:0 auto;height:0.52rem; margin-top:0.16rem;}

	.foot-btn ul li{ float:left;}

	.foot-btn ul li a{width:100%;height:100%; display:block;}

	.foot-btn ul .say{width:2.03rem;height:0.52rem; border-right:1px solid #e8eaec;}

	.say i{width:0.36rem;height:0.26rem; background:url(../assets/img/say.png) no-repeat 0 0; background-size:100%; float:left; margin-left:0.7rem; margin-top:0.13rem;}

	.say span{height:0.26rem; float:left; line-height:0.26rem; margin-left:0.16rem; margin-top:0.13rem;}

	.foot-btn ul .zan{width:1.86rem;height:0.52rem; border-right:1px solid #e8eaec;}

	.zan i{width:0.36rem;height:0.28rem; background:url(../assets/img/zan1.png) no-repeat 0 0; background-size:100%; float:left; margin-left:0.54rem; margin-top:0.13rem;}

	.zan span{height:0.26rem; float:left; line-height:0.26rem; margin-left:0.16rem; margin-top:0.13rem;}

	.foot-btn ul .xing{width:1.2rem;height:0.52rem; border-right:1px solid #e8eaec;}

	.xing i{width:0.34rem;height:0.24rem; margin:0 auto; display:block; padding-top:0.1rem;}

	.xing i img{width:100%;}

	.foot-btn ul .fx{width:1.25rem;height:0.52rem;}

	.fx i{width:0.33rem;height:0.08rem;display:block; margin:0 auto; padding-top:0.15rem;}

	.fx i img{width:100%;}

</style>

5.效果图