【WEB前端全栈成长计划】第三阶段 考核开发实录（二）

    接着上文，因为我们要做的是一个单页面应用，我们先来搭建路由。

    大家还记得上文中我新建了一个views的路径吗，用于存放路由组件的。下面我们来使用路由，我分步骤来实现：
    第一步：先定义路由组件
    观察一下需求截图（页面地址：https://classroom.devcloud.huaweicloud.com/home），看看我们都需要定义多少个组件：

    我只截了第一屏，上面有地址，大家可以看看页面效果，经过观察，切换导航，页面主体内容会进行对应改变，由于我们要做一个单页面应该，我们先完成路由搭建。页面中左侧图片是写死的，右侧的教学平台按钮，登陆注册按钮，都会进行页面跳转，只有中间的导航部分，需要切换页面内容，所以只对这一部分导航定义出相对应的路由组件，我们在views目录下新建八个路由组件：

    第二步：配置路由
    打开router下的index.js文件：

    可以看到基本需要的东西，脚手架都已经帮我们配置好了，我们只需要根据自己的需要添加上路由就可以了，参照HelloWorld这个组件进行配置就可以啦~打开router路径下index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../views/Home.vue"
import CloudClassroom from "../views/CloudClassroom.vue"
import CloudLab from "../views/CloudLab.vue"
import ExperimentalClass from "../views/ExperimentalClass.vue"
import ForumDisplay from "../views/ForumDisplay.vue"
import KunPeng from "../views/KunPeng.vue"
import Microauthentication from "../views/Microauthentication.vue"
import TeachingMarket from "../views/TeachingMarket.vue"
 
Vue.use(Router)
 
export default new Router({
       routes: [{
                     path: '/home',
                     name: 'Home',
                     component: Home
              }, {
                     path: '/cloudclassroom',
                     name: 'CloudClassroom',
                     component: CloudClassroom
              }, {
                     path: '/cloudlab',
                     name: 'CloudLab',
                     component: CloudLab
              }, {
                     path: '/experimentalclass',
                     name: 'ExperimentalClass',
                     component: ExperimentalClass
              }, {
                     path: '/forumdisplay',
                     name: 'ForumDisplay',
                     component: ForumDisplay
              }, {
                     path: '/kunpeng',
                     name: 'KunPeng',
                     component: KunPeng
              }, {
                     path: '/microauthentication',
                     name: 'Microauthentication',
                     component: Microauthentication
              }, {
                     path: '/teachingmarket',
                     name: 'TeachingMarket',
                     component: TeachingMarket
              },{
                     path: '/',
                     redirect: '/home'
              }
       ]
})

    第三步：配置路由器
    打开main.js文件，我们可以看到脚手架都已经给我们配置好了：

    如果没有配置，我们就手动自己配置一下。
    第四步：使用路由组件标签
    这里需要用到两个标签router-link和router-view
    多了不说，直接贴代码App.vue：

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
       <router-link to="/kunpeng">鲲鹏教育中心</router-link>
       <router-link to="/cloudclassroom">MOOC课程</router-link>
       <router-link to="/microauthentication">培训认证</router-link>
       <router-link to="/cloudlab">在线实验</router-link>
       <router-link to="/teachingmarket">教学市场</router-link>
       <router-link to="/experimentalclass">新工科实验班</router-link>
       <router-link to="/forumdisplay">学习交流</router-link>
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
 
}
</style>

    上图是路由配置完的页面效果。

    样式我们先不管它，先把页面框架搭好。

    路由我们已经配置完成了，而且能够正常切换，下一篇文章我们来完成首页组件的开发。