Vue Router 官网：router.vuejs.org/zh/

1 认识 Vue Router

1.1 官方解释：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码 简单来说 Vue Router 是 Vue 的路由管理器，它是 Vue 的核心插件。在当前 Vue 项目中一般都是单页面应用，所以可以说Vue Router 它是应用在单页面中的。在 Web 开发中，路由是指根据 Url 分配到对应的处理程序，Vue Router 它通过对 Url 的管理，实现 Url 和组件的对应，以及通过 Url 进行组件之间的切换。

1.2 目前前端流行的三大框架，都有自己的路由实现：

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

2 基本使用的步骤

• 引入相关的库文件
• 添加路由链接
• 添加路由填充位
• 定义路由组件
• 配置路由规则并创建路由实例
• 把路由挂载到Vue 根实例中

首先

npm install vue-router

创建组件

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Study from '@/components/Study'  //Study.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'vue-router',     //路由名称，
      component: vue-router   //对应的组件模板
    }，{
      path:'/study',
      component:Study,
      children:[        //子路由,嵌套路由 
        {path:'/',component:study},
        {path:'study1',component:Study1},
        {path:'study2',component:Study2},
      ]
    }
  ]
})

3 路由中的钩子(个导航守卫，在任何导航前执行)

3.1 路由配置文件中的钩子函数

在路由文件中我们只能写一个 beforeEnter,就是在进入此路由配置时：

 
{
      path:'/params/:newsId(\d+)/:userName',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('进入了params');
        console.log(to);
        console.log(from);
        next();
},

三个参数：

• to:路由将要跳转的路径信息，信息是包含在对像里边的。
• from:路径跳转前的路径信息，也是一个对象的形式。
• next:路由的控制参数，常用的有next(true)和next(false)。