goodsshow和goodscomment跳转之间的参数传递

• 核心内容

1.它是一个button按钮，不是a标签，不可以改成router，那么怎么跳转呢
  路由定义：{name:'goodscomment',path:'/goods/goodscomment/:goodsid',component:goodscomment},
  父组件<mt-button @click="tocomment" type="danger" size="large" plain>商品评论</mt-button>,
    // 导航到评论组件
            tocomment(){
                this.$router.push({name:'goodscomment',params:{goodsid:this.goodsid}});
            },
2.既然已经有了comment组件，为什么不直接跳到comment组件，而跳到goodscomment呢
  因为comment组件是子组件通过props传递参数，所以要先建一个goodscomment跳转组件，
通过url拿到参数，然后把goodscomment当父组件，里面引入子组件comment，通过props传递参数

• goodscomment

<template>
  <div class="tmpl">
    <comment :artid="goodsid"></comment>
  </div>    
</template>
<script>
    import comment from '../subcom/comment.vue'
    export default{
        data(){
            return {
                goodsid:0
            }
        },
        created(){
            this.goodsid = this.$route.params.goodsid;
        },
        components:{
            comment
        }
    }
</script>
<style> 
</style>

• comment

 <!-- 评论组件 -->
<template>
    <div class="tmpl">
        <div class="title">
            <h2>提交评论</h2>
        </div>
        <div class="postcomment">
            <textarea ref="commentContent" placeholder="请输入要评论的内容.."></textarea>
            <mt-button type="danger" size="large" @click="sendMessage">发表</mt-button>
        </div>
        <div class="list">
            <h2>评论列表</h2>
            <ul>
                <li v-for="item in comments" >
                    {{item.content}}
                </li>
            </ul>
            <mt-button type="danger" size="large" @click="getMore">加载更多....</mt-button>
        </div>
    </div>
</template>
<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
export default{
    data(){
        return {
            comments:[],
            pageindex :1 //分页的页码控制变量
        }
    },
    props:['artid'],
    methods:{
        // 1.0 提交评论
        sendMessage(){
            // 1.0 获取提交内容
            var txt = this.$refs.commentContent.value;
            // 2.0 发出ajax的post请求
            var url = common.apiDomain+'/api/postcomment/'+this.artid;
            this.$http.post(url,{content:txt},{emulateJSON:true})
            .then(res=>{
                Toast(res.body.message);
                // 清楚文本框内容
                this.$refs.commentContent.value = '';
            });
            this.comments =[];
            // 3.0 刷新当前artid对应的评论列表数据
            this.getMessage(1);
        },
        // 2.0 获取评论
        getMessage(pageindex){
            var url = common.apiDomain+'/api/getcomments/'+this.artid+'?pageindex='+pageindex;
            this.$http.get(url).then(res=>{
                if(res.body.status !==0){
                    Toast(res.body.message);
                    return;
                }
                this.comments = this.comments.concat(res.body.message);
            });
        },
        // 3.0 加载更多
        getMore(){
            // 1.0 每点击一个加载跟多按钮就将this.pageindex 自增1
            this.pageindex ++;
            // 2.0 获取新的页码中的数据
            this.getMessage(this.pageindex);
        }
    },
    created(){
        this.getMessage(this.pageindex);
    }
}   
</script>
<style scoped>
    .title{
        border-bottom: 1px solid rgba(0,0,0,0.4);
    }
    .postcomment{
        margin-top: 5px;
        padding: 5px;
    }
</style>