以前敲代码的时候并不是特别理解路由，在这篇文章里，记录我做博客项目中，是如何使用路由的！
阿西吧
真正上手了就知道为什么要使用路由来跳转页面了。官方文档上说，Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
因为vue是SPA（单页应用），所以没办法实现a标签跳转页面，a标签跳转的是页面，而vue本就只有一个页面，因此需要自己的路径管理器（router），组件化是单页应用的核心思想，页面由组件组合而成。
我的项目是如何使用的
1. 安装，使用npm下载，可以查看官方文档。
npm install vue-router
2. 配置。
首先，在src文件夹下新增router文件夹，并创建index.js文件。
然后在js文件中配置路由。先定义route, 就是定义路径到组件的映射。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。
import Vue from 'vue'
import VueRouter from 'vue-router'
// 告诉vue使用vueRouter
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: () => import('../views/home.vue') //直接导入并且使用
},
{
path: '/category', // 浏览器输入这个地址，则加载component引入的组件
name: 'category',
component: () => import('../views/category.vue')
},
{
path: '/folder',
name: 'folder',
component: () => import('../views/folder.vue')
},
{
path: '/myself',
name: 'myself',
component: () => import('../views/myself.vue')
},
{
path: '/articleDetail',
name: 'articleDetail',
component: () => import('../views/articleDetail.vue')
},
{
path: '*', //当没有路由匹配时，匹配* 重定向至首页
redirect: '/'
}
]
const router = new VueRouter({
routes
})
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default router
3. 引入。
在 main.js文件中，引入路由。
4. 使用。
vue-router有两种实现页面跳转的方法。一种是使用<router-link>标签跳转,会被渲染成a标签。我是使用router实例来实现的，在JavaScript中实现页面跳转，也就是通过点击事件跳转。
这时，要在App.vue页面中，加入
<router-view />来显示。
现在，当点击不同的tab时，就会切换到相应的页面，可以看到，地址栏也是相应地改变的。
5. 重定向。
在开发过程中，为了处理错误url，我使用了重定向（redirect）。也就是路由不匹配时，可以跳回首页，可以通过routes配置来完成，把原来的component换成redirect参数。
现在，当地址栏没有匹配的路由时，就会跳转到首页。
总结。
** vue-router实现的方式有很多种，包括提到的<router-link>标签等，在定义路由的时候也有多种不同的方式，各有优缺点，本文中提到的皆是我自己写博客中使用的方式。现在先写到这里吧，明天再写如何使用动态路由，传递参数实现页面跳转的。 **
