前端框架Vue.js学习平台【环森编程】

7.3 中间内容部分组件

菜单和底部信息这两个组件，在App.vue里使用了，因为这两部分被所有页面共享，但接下来的这个主页，就不能放入App.vue(除非就一个页面)。

虽然我们现在只有一个页面，但要为了将来两个或者多个页面准备。

现在我们来介绍一下路由。路由相当于页面跳转，不同的是，它是组件间的跳转。

它分两个部分：

1.配置路由

首先需要把组件和url的模式绑定起来，这部分在src/router下的index.js定义

我们只需要关注这部分代码。其中path就是url模式，name是这个模式的名字，component是这个url模式对应的是哪个组件。用上面的代码举例：

这是主页http://localhost:8080/，它对应了Home这个组件

那么http://localhost:8080/login就对应了Login这个组件

这部分的配置和jsp的servlet配置非常类似。

2.路由后填充的位置

访问http://localhost:8080/login这样的url后，并不是页面全部都替换成Login组件的内容，主页仍然是以index.html为模板，然后主要组件仍然是App.vue。那这个“被点击”到的组件该怎么显示？显示到哪里呢？

答案是router-view标签，被点击后的组件，就会填满router-view所在的位置，所以这个时候app.vue应该是这么写：

如第三行代码所示。这种模式是假设所有网页的头部菜单和底部信息都是一样的。这样点击了哪个模式，就找到对应的组件，然后取代App.vue中间的router-view标签。

接下来，我们就要新增一个组件作为中间内容，然后为这个组件添加一个路由入口。下面是新增组件Main的三部分完整代码：

你好，游客。

</div>

<p v-if="mainInfo" class="col-xs-12 col-sm-7"><span class="info">你正在学习<span class="bg-info">{{mainInfo.courseName}}</span>

</span>

<span class="info">你上次学习到<a id="studyLink" href="study.jsp?c=11#060100">{{mainInfo.chapterName}}</a>

</span>

<span class="info">已完成{{mainInfo.percent*100}}%<progress max="1" v-bind:value="mainInfo.percent"></progress>

</span>

</p>

你正在学习

<span class="bg-info">Java程序设计</span>

<br/>

<span>循序渐进，在线练习，自动批改，适合零基础的学习者</span>

你还没任何学习记录哦，

，开始你的Java之旅吧！

</p>

</div>

<li class="first"><span>坚持每天学习一点</span>

<br/>

<span>扫码使用小程序，手机也可以学习java哦</span>

</li>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</template>

2.JavaScript部分：

export default{

name:"Main",

data(){

return{

mainInfo:{

courseName:"java程序设计",

chapterName:"8.1 类的基础",

percent:0.85,

}

;

}

3.css部分

#box1 {
      overflow: hidden;
      margin: 0 0 35px 0;
      border-bottom: 1px dotted;
      padding-bottom: 20px;
}
#box2 {
      overflow: hidden;
      float: left;
}
#box3 {
      width: 300px;
      overflow: hidden;
      margin: 0 0 0 420px;
      outline: 1px solid #ccc;
      float: left;
}
#content {
      padding: 20px 40px 0px 40px;
      background: #fff;
      position: relative;
      border-radius: 10px;
      box-shadow: 0 2px 8px #ccc;
      border-left: 5px solid #ccc;
      border-right: 5px solid #ccc;
}
#content #studyLink {
      font-weight: bold;
      color: #ad8667;
}
#main {
      position: relative;
    /*
    min-width: 1001px;
     */
      color: #5e5e5e;
}
#main strong {
      color: #3e3e3e;
}
#main a {
      color: #242424;
}
#main h2,#main h3,#main h4 {
      color: #242424;
}
#main ul {
      list-style: none;
}
#main ul li {
      border-top: dotted 1px #b3b3b3;
      padding-bottom: 20px;
}
#main ul li.first {
      padding-top: 0;
      border-top: 0;
      font-weight: bold;
}
#main ul li.first .info {
      padding-left: 0px;
      border-top: 0;
      font-size: 12px;
      font-weight: normal;
      line-height: 14px;
      color: red;
}
.wxQr{
    display: block;
    width: 129px;
     margin-left: auto;
     margin-right: auto;
}
#main ul.imageList li {
      padding: 15px 0 15px 0;
}
p span.info {
      display: block;
      padding: 2px;
}

最后，修改Header.vue组件关于主页的链接，从"/"改成"/Main"

Java Web学习平台

7.3 中间内容部分组件