• 核心技术

1.页面跳转如何通过url拿到参数
路由中配置：{path:'/news/newsshow/:newsid',component:newsshow},
 跳转时加上参数：<router-link v-bind="{to:'/news/newsshow/'+item.id}">
获取参数： var newsid  = this.$route.params.newsid;

• 创建newshow组件

<template>
    <div class="tmpl">
        <!-- 1.0 标题 -->
        <div class="twarp">
            <h2 v-text="info.title"></h2>
            <span class="desc">
                {{info.add_time  | datefmt}}  
                {{info.click}}次浏览
                 分类:民生
            </span>
        </div>
        <!-- 2.0 新闻详细展示区域 -->
        <div class="content" v-html="info.content"></div>
        <!-- 3.0 评论组件 -->
        <comment :artid="newsid"></comment>
    </div>
</template>
<script>
//导入提示框功能
import { Toast } from 'mint-ui';
// 1.0 导入评论组件对象
import comment from '../subcom/comment.vue';
    export default{
        data(){
            return {
                info:{},
                newsid:0
            }
        },
        methods:{
            getinfo(){
                // 1.0 获取url传入的newsid
                var newsid  = this.$route.params.newsid;
                // 2.0 ajax请求
                this.$http.get(common.apiDomain+'/api/getnew/'+newsid)
                .then(res=>{
                    if(res.body.status !==0){
                        Toast(res.body.message);
                        return;
                    }
                 //3.0将获取的信息赋值给info
                    this.info = res.body.message[0];
                });
            }
        },
        created(){
            // 初始化newsid
            this.newsid = this.$route.params.newsid;
            //钩子函数，执行ajax
            this.getinfo();
        },
        components:{
             //评论组件，前面是es6写法，后面是es5
            comment // comment:comment
        }
    }
</script>
<style scoped>
    .twarp h2{
        color:#0094ff;
        font-size:16px;
    }
    .twarp .desc{
        color:rgba(0,0,0,0.4);
        
    }
    .twarp{
        padding:10px;
        border-bottom: 1px solid rgba(0,0,0,0.4); 
    }
    .content{
        padding:5px;
    }
</style>

• 设定路由规则
  newslist.vue

            <li v-for="item in newslist" class="mui-table-view-cell mui-media">
               //将a改成router-link
                <!-- 加参数的写法，和不加参数的写法是不一样的，要用v-bind ,id信息里面自带的-->
                <router-link v-bind="{to:'/news/newsshow/'+item.id}">
                ![](item.img_url)
                    <div class="mui-media-body">
                        {{item.title}}
                        <p class='mui-ellipsis'>
                            发表时间：{{item.add_time | datefmt}}
                            <span>点击:{{item.click}}</span>
                        </p>
                    </div>
                </router-link>
            </li>

• router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import newslist from '@/components/news/newslist'
import newsshow from '@/components/news/newsshow'
Vue.use(Router)
export default new Router({
    linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称
routes:[
      // {path:'/login',component:login},
      // {path:'/register',component:register},
      {path:'/Home',component:Home},
      {path:'/news/newslist',component:newslist},
      // 带参数的路由跳转，要加上参数
      {path:'/news/newsshow/:newsid',component:newsshow},
  ]
})