6.7 Sidebar功能完善

之前的sidebar只是展示所有章节，点击是不能更新右边章节内容，这一节来解决这个问题。上一节的章节，在html模板里绑定了一个单击事件chapterClick，之前是没有实现此函数的。
修改Sidebar.vue
现在我们添加chapterClick到sidebar的js里面，注意，下面这个函数要放在methods里面：
chapterClick:function(e){
    let code=e.currentTarget.getAttribute("data-code");
    let chapterData={code:code,courseId:this.courseId};
    this.$router.push({
        path:"/study",
        query:chapterData,
    });
},
首先这个code从data-code这个属性得到，这个属性在html模板里绑定了：
v-bind:data-code="chapter.code"
接下来第8行到第11行代码，是主动路由，用JavaScript切换组件，注意这里切换的是Study组件，同时把参数发过去，参数query是json格式，在第4行代码定义，假设点击的是第三章，那么就是这样的：{"code":"030000","courseId":"1"}。因为获得章节内容，查找数据库的时候需要这两个参数。
修改Study.vue
Study.vue，现在已经跟之前的机制不一样了，章节参数是发送到这里，然后再发给StudyContent.vue组件触发更新。
Study.vue的js部分，需要添加computed部分，得到sidebar的chapterClick传过来的code和courserId:
computed:{
    code(){
        let code=this.$route.query.code;
        if( ! code){
            code="010100";
        }
        return code;
    },
    courseId(){
        let courseId=this.$route.query.courseId;
        if( ! courseId){
            courseId="1";
        }
        return courseId;
    },
},
computed部分，
computed:{
    code(){
        let code=this.$route.query.code;
        if( ! code){
            code="010100";
        }
        return code;
    },
    courseId(){
        let courseId=this.$route.query.courseId;
        if( ! courseId){
            courseId="1";
        }
        return courseId;
    },
},

computed和method部分平行，类似这样：
第57和64行是确保这两个参数不为空，假如是空的，那就意味着不是左边菜单点击的，而是顶部菜单点击的学习进入的，这种情况code定为第一章第一节，courseId定为1（表示课程是java）
然后更新Study.vue的html部分：
<template>
    <div id="main">
        <Sidebar/>
        <StudyContent :courseId="courseId" :code="code"/>
    </div>
</template>
修改StudyContent.vue
这里的StudyContent都增加了属性，目的是根据属性显示章节内容。这样StudyContent也要增加属性（props）第90行代码：
props:["courseId","code"],
同时修改getChapterContent函数，变化就是url已经不是固定的了，是根据props的值来(props的值是外部传入，不能改变；data的值可以改变，但都可以用“this.”的形式引用。）
getChapterContent:function(){
    let url="https://www.codessp.cn/wxCodessp.jsp?type=content&code="+this.code+"&courseId="+this
        .courseId;
    axios({
        headers:{
            "Content-Type":"application/x-www-form-urlencoded",
        },
        method:"get",
        url:url,
    })
    .then((response)=>{
        if(response.status==200){
            let t=response.data;
            this.chapter=t;
        }
    });
},
最后，还需要增加一个监听，当code属性改变的时候，触发getChapterContent，这部分的代码是这样的：
watch:{
    code:"getChapterContent",
},
这部分代码和methods等是平行关系，不能写在methods里面，如下所示：

最后，Sidebar.vue并不带courseId这个属性，理论上它也需要外部传入，Study.vue的template部分需要改成下面所示：
<template>
    <div id="main">
        <Sidebar :courseId="courseId"/>
        <StudyContent :courseId="courseId" :code="code"/>
    </div>
</template>
模仿StudyContent对courseId的用法，也在Sidebar增加一个courseId属性。