由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用<a></a>标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。
本文档主要是一个Vue-router入门文档，需要先查看“Vue-cli搭建项目”文档，创建项目基础上实现以下功能。
安装vue-router
vue-router是一个插件包，所以我们还是需要用npm来进行安装的。
在使用Vue-cli搭建项目时，有一个选项是选择是否安装vue-router的，如果已经安装就不需要安装了，如果未安装需要在项目根目录下通过执行以下命令进行安装：
npm install vue-router --save-dev如果你安装很慢，也可以用cnpm进行安装。
解读router/index.js文件
我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}
]
})增加一个Hi的路由和页面
在src/components目录下，新建 Hi.vue 文件。
<template>
<div>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "Hi",
data() {
return {
message : 'Wo Shi Hi!'
};
}
};
</script>
<style scoped>
</style>
在router/index.js文件的上边引入Hi组件，并在router/index.js文件的routes[]数组中，新增加一个对象。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入Hi
import Hi from '@/components/Hi'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// 配置Hi对象
{
path: '/Hi',
name: 'Hi',
component: Hi
}
]
})完成以上信息就完成了一个新路由及新页面编写，启动项目在浏览器中输入
URL： http://localhost:8080/#/hi ，就可以看到以下页面，表示成功。
增统一的导航功能
在src/App.vue文件中的template里加入下面代码，实现导航。
<!-- 导航 -->
<div>
<router-link to="/">Hello</router-link>
<router-link to="/Hi">Hi</router-link>
</div>完成的src/App.vue文件内容为：
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 导航 -->
<div>
<router-link to="/">Hello</router-link>
<router-link to="/Hi">Hi</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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;
}
</style>完成以上信息就完成了一个导航编写，启动项目在浏览器中输入
URL： http://localhost:8080/，就可以看到以下页面，在页面中就多了导航菜单链接，表示成功。
点击Hello进入Hello页面，点击Hi,进入Hi页面
router-link
链接<router-link>标签
<router-link to="/">[显示字段]</router-link>- to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，
- [显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页。
原文发布时间为：2018年04月19日
原文作者： 阿刚ABC
本文来源：开源中国 如需转载请联系原作者
