这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战 src=http___www.jisuxia.com_uploadfile_2020_0120_20200120013609531.jpg&refer=http___www.jisuxia.jfif

定义：

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系

vue-router有哪些组件？

<router-link :to='' class='active-class'>   //路由声明式跳转 ，active-class是标签被点击时的样式

<router-view>                  //渲染路由的容器

<keep-alive>                    //缓存组件

vue-router有哪些模式，有什么不同及原理？

vue-router有两种模式，hash模式和history模式区别：最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。

hash模式背后的原理是onhashchange事件

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求

vue-router传参方法

params,query

params

路径参数为name，不能使用path
参数不会显示在路径上
浏览器强制刷新参数会被清空

  // 传递参数
  this.$router.push({
    name: Home，
    params: {
    	age: 18 ,
    	isShow: true
  	}
  })
  // 接收参数
  const a = this.$route.params

query:

路径参数为name或path
参数会显示在路径上，刷新不会被清空

// 传递参数
 this.$router.push({
    name: Home，//也可写成 path:'/home'
    params: {
    	age: 18 ,
    	isShow: true
  	}
  })
  // 接收参数
  const a = this.$route.query

vue-router有哪几种导航钩子

vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消

全局导航钩子
组件内的钩子
单独路由独享钩子

1.全局导航钩子:

全局导航钩子主要有两种钩子：前置守卫（beforeEach)、后置钩子(afterEach)

beforeEach:

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});

这三个参数 to 、from 、next 分别的作用：

to: Route，代表要进入的目标，它是一个路由对象
from: Route，代表当前正要离开的路由，同样也是一个路由对象
next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

注意：next 方法必须要调用，否则钩子函数无法 resolved

afterEach:

router.afterEach((to, from) => {
    // do someting
});

后置钩子并没有 next 函数，也不会改变导航本身

2.组件内的钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

    beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // 导航离开该组件的对应路由时被调用
    }

注意： beforeRouteEnter 不能获取组件实例 this，因为在守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认是，会执行这个回调，这时就可以访问组件实例了，如：

beforeRouteEnter(to, from, next) {
    next (val => {
        // 可以通过 val 来访问组件实例解决了没有 this 的问题
    })
}

3.单独路由独享钩子

在路由配置上直接进行定义

cont router = new VueRouter({
    routes: [
        {
            path: '/list',
            component: List,
            beforeEnter: (to, from ,next) => {
                // 操作
            }
        }
    ]
})

vue-router实现路由懒加载（动态加载路由）

把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({ 
    routes: [
        { 
           path: '/home',
           name: 'Home',
           component:() = import('../shop/home') 
          } 
      ] 
     })

route和 router的区别

route 是路由信息对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,name等路由信息参数
router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等

router实例方法

app 　　配置了router的Vue根实例
mode 当前的路由模式，可以为hash、history或者abstract
options 创建VueRouter实例时传入的所有参数
history 当前的History对象(通过该对象进行路由跳转的)
addRoutes 动态添加更多的路由规则，参数必须时一个符合routes选项要求的数组
push 路由到新的路由地址
replace 替换当前路由到新的路由(它不会向history添加新记录)
go 在history记录中向前或向后退多少步
back 在history记录中后退一步,等效于go(-1)
forward 在history记录中前进一步,等效于go(1)
beforeEach 全局前置守卫
beforeResolve 全局解析守卫
afterEach 全局后置钩子
onReady(callback,errorCallback) 注册两个回调函数，在路由完成初始导航时触发
onError(callback) 　　　　注册一个回调，该回调会在导航过程中出错时被调用

vue路由简单总结｜ 8月更文挑战

定义：