从头到尾了解Vue-router（一）一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。

了解Vue-router

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

“更新视图但不重新请求页面”是前端路由核心之一，目前在浏览器环境中主要有两种实现方式：

hash模式
history模式

路由之间是跳转的方式

Vue 路由跳转方式

Vue-router配置路由

在vue中配置路由分为5个步骤：

1、安装

npm install -- save vue-router

2、引用

import VueRouter from'vue-router'

3、配置路由文件

var router = new VueRouter({
routes:[
    {
        path:"/hello",
        component:HelloWorld
    },{
        path:"/wen",
        component:HelloWen
    new Vue({
        el:'#app',
        components:{App},
        router,
     template:'<App/>'
})

4、视图加载的位置

默认App.vue文件中加<router-view></router-view>

5、跳转导航

<router-linkto="/hello">helloword</router-link>（渲染出来的是a标签）

Vue-router 几种路由守卫

1、路由守卫为
2、全局守卫：beforeEach
3、后置守卫：afterEach
4、全局解析守卫：beforeResolve
5、路由独享守卫：beforeEnter

Vue-router的钩子函数有哪些

全局钩子函数要包含beforeEach

beforeEach函数有三个参数,分别是
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是confirmed（确认的）否则为false,终止导航

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

单独路由独享组件

beforeEnter

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。 组件内钩子

beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。