• 核心技術

1.頁面跳轉如何通過url拿到參數
路由中配置：{path:'/news/newsshow/:newsid',component:newsshow},
 跳轉時加上參數：<router-link v-bind="{to:'/news/newsshow/'+item.id}">
獲取參數： var newsid  = this.$route.params.newsid;

• 創(chuàng)建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 新聞詳細展示區(qū)域 -->
        <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;
            //鉤子函數不瓶，執(zhí)行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>

• 設定路由規(guī)則
  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'>
                            發(fā)表時間：{{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},
  ]
})