一、简单介绍

vue-router是vue官方的路由解决方案，简单易用，中文官方地址如下：
vue-router中文手册

二、安装

vue-router是一个插件包，需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装，也可以自己使用命令安装：

npm install vue-router --save

三、解读核心文件

用vue-cli构建项目之后，在src/router/index.js文件中，看到以下的路由核心文件：

// 引入vue框架import Vue from 'vue'// 引入vue-router路由依赖import Router from 'vue-router'// 引入页面组件，命名为HelloWorldimport HelloWorld from '@/components/HelloWorld'// Vue全局使用RouterVue.use(Router)// 定义路由配置export default new Router({
  routes: [                //配置路由，这里是个数组
    {                        //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'HelloWorld',        //路由名称，
      component: HelloWorld     //对应的组件模板
    }
  ]})

四、使用

在系统入口文件main.js中注入router，代码如下：

// 引入vue框架import Vue from 'vue'// 引入根组件import App from './App'// 引入路由配置import router from './router'// 关闭生产模式下给出的提示Vue.config.productionTip = false// 定义实例new Vue({
  el: '#app',
  router, // 注入框架中
  components: { App },
  template: '<App/>'})