说明

类比

本文实现的效果，类似下图属性窗口，点击【红框】按钮，下面可以 实现切换

本文案例效果图

实现功能：通过点击 超链接，实现切换显示组件

特点：页面内容改动，但不刷新，也没有请求服务器

概念：路由组件

与普通组件不同，是通过路由控制 显示的组件，叫 路由组件

创建 views 目录

在 src 目录下，创建 views 目录，路由组件 都放在这个目录下

创建组件

创建 Student 组件

普通组件，无特殊改动

在 views 目录下，创建 Student.vue 文件，内容如下：

<template>
    <div class="app">
        <div>学生信息</div>
        <div>姓名：{{name}}</div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            name:'李雷'
        }
    }
}
</script>
<style scoped>
.app{
    border: 1px red solid;
}
</style>

创建 Teacher 组件

普通组件，无特殊改动

在 views 目录下，创建 Teacher.vue 文件，内容如下：

<template>
    <div class="app">
        <div>教师信息</div>
        <div>姓名：{{name}}</div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            name:'Miss Gao'
        }
    }
}
</script>
<style scoped>
.app{
    border: 1px green solid;
}
</style>

创建路由文件（重要）

在 src 目录下创建 router 目录，在 router 目录下，创建 index.js 文件

作用：该文件配置的是 路由信息

注意：该路由文件只需要一个

内容如下：

//引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import student from '../views/Student'
import teacher from '../views/Teacher'

//创建路由，并暴露
// 通过new 构造函数() 创建 VueRouter对象
// 需要传入 {} 对象
export default new VueRouter({
    routes : [ // 注意：是 routes，不是router，其value是数组，数组里面的元素是 {} 对象
        { 
            path: '/student', //路径，关键：必须以 “/” 开头
            component: student //组件
        },
        { 
            path: '/teacher', //路径
            component: teacher //组件
        }
    ]
})

解释：每个路由映射一个组件

path 属性值对应 <router-link to=""> 中的 to 属性值
注意： 必须以 / 开头
component 属性值是组件

修改 main.js（重要）

增加以下内容（只改一次）：

引入 VueRouter
引入 路由器文件
将路由配置到 Vue 对象中

内容如下：

import Vue from 'vue'
import App from './App.vue'

//关键：引入VueRouter=======================
import VueRouter from 'vue-router'
//关键：引入路由器文件=======================
// import router from './router/index' // 完整写法
import router from './router' //由于文件名是index，所以可以省略

Vue.config.productionTip = false
//关键：使用路由器插件，将<router-link>渲染成<a>标签====================
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router:router //将路由配置到Vue对象中=======================
}).$mount('#app')

测试访问

启动服务，访问网页，发现链接后面会带有 # 号，说明路由开始工作了，如下图：

注意：但是页面还是空白

修改 App.vue（重要）

显示导航和组件的

router-link 标签

<router-link active-class="action" to="/student"> 标签作用：

使用 <router-link> 组件来导航，默认会被渲染成一个 <a> 标签
to：属性值是路由组件中的 path。渲染为 href 属性，#开头的hash地址
active-class="action"，显示哪个组件，哪个组件的 <a> 标签就加上 action 样式

router-view 标签

路由匹配的组件，渲染在这里

<router-view></router-view>

完整代码

<template>
  <div id="app">
    router-link：相当于超链接，切换组件<br>
    <router-link active-class="action" to="/student">学生管理</router-link><br>
    <router-link active-class="action" to="/teacher">教师管理</router-link><br>
    router-view：组件显示区域<br>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.action{
  color: red;
}
a{
  color: blue;
}
</style>

访问网页

访问网页，只显示 导航超链接，不显示组件，如下图：

点击超链接的变化

点击超链接 学生管理，有以下变化：

切换显示学生管理组件

url后面会带有 `student`

如下图：

该超链接有 `action` 样式