学习笔记Vue（十 七）—— 路由

首先添加路由：vue add router
添加完成之后，vue的默认界面上面多了一条导航：

这就是vue默认帮你生成的导航。
可以看到项目的src文件夹下多了一个router.js文件，和一个views的文件夹。

可以看到views里默认有两个自动生成的文件，Home.vue 和About.vue ，对应页面上显示的两个导航，所以这个views里放的就是路由的组件。

再看router.js的代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      //懒加载
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

routes是一个数组，里面包含路由组件的参数，path是路由的路径，name是路由的名字，component是路由显示的组件。home组件直接在顶部import进来，但是about却没有，而且about的component是一个函数，这是由于一次性加载很多组件会消耗性能，所以只加载主页要显示的component，其余的都通过懒加载来处理。

那么路由是如何显示在界面上的呢？
在App.vue里有一个<router-view/> 标签，这个标签就是路由的组件渲染的位置。
<router-link>是路由的链接标签，通过它上面的to属性配置路由地址，可以点击跳转到对应的页面。
还可通过tag属性，把router-link标签替换成你想要的标签。
实例：
App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link tag="li" :to="{name: 'home'}">Home</router-link> |
      <router-link tag="li" :to="{path: '/learn'}">学习</router-link> |
      <router-link tag="li" to="/student">学员</router-link> |
      <router-link tag="li" to="/about">About</router-link>
    </div>
    <!-- router-view 是你切换页面的时候组件展示的位置 -->
    <router-view/> 
  </div>
</template>

<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;
}
</style>

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/learn',
      name: 'learn',
      component: ()=>{
        return import('./views/Learn');  //懒加载
      }
    },
    {
      path: '/student',
      name: 'student',
      component: ()=>{
        return import('./views/Student');
      }
    },
    {
      path: '/about',
      name: 'about',
      component: ()=>{
        return import('./views/About');
      }
    }
  ]
});

在views里添加两个文件，分别是Learn.vue和Student.vue

<template>
    <div class="learn">课程学习</div>
</template>

<template>
    <div class="student">学员展示</div>
</template>

效果：

当点击某个router-link的时候，他会多两个类名：
router-link-exact-active 它的to的路径和展示路径完全一致
router-link-active 只要包含了路径就会有

点击学习，路径是/learn，包含根路径/，所以home也有一个router-link-active类名。
通过linkExactActiveClass和linkActiveClass可以改变这个默认的选中类名。