</router-link>
</li>
<li>
<router-link to="/friend">
<i class="icon-nav icon-nav3"></i><span>学友</span>
</router-link>
</li>
<li>
<router-link to="/find">
<i class="icon-nav icon-nav4"></i><span>发现</span>
</router-link>
</li>
<li>
<router-link to="/mine">
<i class="icon-nav icon-nav5"></i><span>我的</span>
</router-link>
</li>
</ul>
</div>
</template>
这里有几点需要知道：
1.使用 router-link 组件来导航.
2.通过传入 `to` 属性指定链接.
3.<router-link> 默认会被渲染成一个 `<a>` 标签
路由出口
我们前面说了，路由跳转就是相应组件在渲染，那么渲染的内容是怎么显示也页面中的呢，那就是路由出口'<router-view></router-view>’做的事了，路由匹配到的组件将渲染在这里。
路由出口我们可以设置在当前组件中也可以设置在其他组件中，项目中我们就将所有组件都渲染在最大的容器App.vue组件中（我们项目中App组件只作为渲染容器）。
<template>
<div id="app">
<router-view></router-view>
</div>
</template> JavaScript
定义路由文件可以直接写在main.js文件中，也可以新建一个js文件，因为我们的组件比较多，所以单独把路由拿出来写了一个router.js文件。
// 0. 如果使用模块化机制编程，进入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来，我们一般都是建好了组件再来写路由的
// 所以就会有好多这样的语句。
import home form "./components/home"
import login form "./components/login"
// 2. 定义路由
routes: [ //这里跟1.x有挺大区别，有接触的自己看清楚哦
{
path: '/', //浏览器网路请求走通之后默认就会去找域名下的根目录，
name: 'home', //所以我们就把这个组件作为默认首页
component: home
},
{
path: '/login',
name: 'login',
component: login
}
]// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({ //你就当const是var
routes
//（缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
