共计 616 个字符，预计需要花费 2 分钟才能阅读完成。
写在后面
在上篇博客 前端路由 中是依据原生的 Web API 手动构建的前端路由器。在 Vue 框架中，Vue 官网有提供对应的路由管理器，就是 Vue Router。无论是哪种前端路由管理工具，实现思路根本是统一的。因而在学习 Vue Router 的应用办法时，应从 路由表、路由链接、路由内容等 进行记忆。
1. 是什么
Vue Router 是 vue.js 官网的路由管理器。
2. 根本用法
2.1 装置 vue-router 到我的项目中
装置：yarn add vue-router
引入：
import VueRouter from 'vue-router'
Vue.use(VueRouter)2.2 定义路由表
const routes = [{path: '/a', component: A},
{path: '/b', component: B}
]2.3 创立 VueRouter 实例
const router = new VueRouter({
routes,
mode: 'history' // 路由模式抉择，默认是 hash
})2.4 将路由注入利用
new Vue({render: h => h(App),
router
}).$mount('#app')2.5 定义路由路口（a 链接地位）
<router-link to="/a">go to A</router-link>
<router-link to="/b">go to B</router-link>2.6 定义路由进口（内容展现地位）
<router-view></router-view>
正文完
