1. router-link
<router-link> 默认会被渲染成一个 <a> 标签，通过传入 to 属性指定链接。
<router-link to="/home">首页</router-link>
2.router-view
路由匹配到的组件会渲染到router-view 中。
<div id="app">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/category">分类</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
3. 路由js文件的配置
(1).如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)。
//router/ index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
(2).使用import 导入路由组件。
import Home from 'pages/home';
import Category from 'pages/category';
(3).定义路由。
- name 路由名称，并且<router-link>中的to属性也可以使用name匹配路由。
- path 路径，也与<router-link>中的to属性进行匹配（常用的匹配方式）。
- component 组件，与(2)中导入路由组件的名称一致。
const routes = [
{
name:'home',
path:'/home',
component: Home
},
{
name: 'category',
path: '/category',
component: Category
}
]
(4).创建 router 实例，然后传 routes 配置，并把实例导出。（即（3）中的配置）
export default new Router({
routes // (缩写) 相当于 routes: routes
});
(5). 使用vue-cli搭建的项目，有一个入口文件main.js 。在里面导入路由js文件，并挂载到vue实例中，这样整个项目都可以使用路由了。
import router from './router';
new Vue({
router
});
(6). 最后在任何组件内通过 this.$router访问路由器，也可以通过 this.$route 访问当前路由。
(7). 当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值.router-link-active。
例如点击首页的时候，如下第一个路由会设置.router-link-active类名。
<p>
<router-link to="/home">首页</router-link>
<router-link to="/category">分类</router-link>
</p>
