Vue-router路由守卫 ( v4.x )

对比之前版本，需要使用next的地方，现在默认返回undefined，不需调用next就可进入下一个路由。避免了未正确使用next而导致的一些错误 ( 比如：未调用next )。

1. 全局前置守卫

router.beforeEach([to][, from][, next])

router.beforeEach((to, from, next) => {
  // ...

  /* 1. 取消导航 */
  return false;

  /* 2. 进入下一个路由守卫 */
  return true;
  return undefined;

  /* 3. 跳转至其他路由地址 */
  return [url];

  // next 不做赘述
})

2. 全局解析守卫

router.beforeResolve([to][, from][, next]) ( 同全局前置守卫 )

3. 全局后置守卫

router.afterEach([to][, from][, failure])

4. 路由独享守卫

beforeEnter([to][, from][, next]) ( query / params / hash 改变时不会触发 )

const routes = [
  {
    path: '/demo1',
    component: Demo1,
    beforeEnter: (to, from) => {
      return false; // 取消导航
    }
  },
  {
    path: '/demo2',
    component: Demo2,
    beforeEnter: [fnc1, fnc2] // 接收一个函数数组
  }
]

5. 组件前置路由守卫

beforeRouteEnter ( 在vm实例创建之前调用， 可通过next传入一个回调函数，默认参数是vm实例 )

const ComponentOptions = {
  beforeRouteEnter(to, from, next) {
    next(vm => {});
  }
}

6. 组件路由更新守卫

beforeRouteUpdate ( 重用组件时调用 )

const ComponentOptions = {
  beforeRouteUpdate(to, from) {
    // ...
  }
}

7. 组件后置路由守卫

beforeRouteLeave([to][, from][, next]) ( 重用组件时调用 )

const ComponentOptions = {
  beforeRouteLeave(to, from) {
    // ...

    /* 取消导航 */
    return false
  }
}

8. 调用顺序

进入组件
beforeEach
-> beforeRouterEnter
-> beforeResolve
-> afterEach
-> beforeCreate ( 组件lifecycle )

离开组件
beforeRouterLeave
-> beforeEach
-> beforeResolve
-> afterEach
-> beforeDestory ( 组件lifecycle )

vue-router 路由共分为三大类:

• 全局守卫

• 路由独享守卫

• 路由组件内的守卫

 守卫方法接收三个参数：
    to：即将要进入的目标路由对象
    from：当前导航正要离开的路由
    next：执行下一步
    1). next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是     confirmed（确认的）
    2). next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址
    3). next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
    4).next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调

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

 /**
     * @param {to} 将要去的路由
     * @param {from} 出发的路由
     * @param {next} 执行下一步
     */
    router.beforeEach((to, from, next) => {
        document.title = to.meta.title || '卖座电影';
        if (to.meta.needLogin && !$store.state.isLogin) {
            next({
                path: '/login'
            })
        } else {
            next()
        }
    })
 

全局守卫有三个,分别是:

• router.beforeEach         全局前置守卫 进入路由之前执行
• router.afterEach         全局后置守卫  和 beforeEach() 相比，这个router方法是在路由进入之后触发，并且少了一个参数next()，进入路由之后执行
• router.beforeResolve          全局解析守卫    和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

(1) router.beforeEach

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

​​​​​​

(2) router.afterEach       

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

(3) router.beforeResolve      

// 全局解析守卫
// 和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
router.beforeResolve((to, from, next) => {
    console.log('beforeResolve全局解析守卫被调用')
    next()
})

路由独享守卫: beforeEnter

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫beforeEnter

使用方法与全局守卫相同

不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

        //登录模块
        path: '/login',
        component: () => import('@/views/login'),
        beforeEnter: (to, from, next) => {
            if (to.meta.needLogin && !$store.state.isLogin) {
                next({
                    path: '/login'
                })
            } else {
                next()
            }
        }
 

组件内的守卫有三个,分别是:

• beforeRouteEnter

• beforeRouteUpdate

• beforeRouteLeave

(1) beforeRouteEnter

可以在路由组件内直接定义以下路由导航守卫：
    在渲染该组件的对应路由被 confirm 前调用
    不！能！获取组件实例 this，因为当守卫执行前，组件实例还没被创建
    可以通过 next 获取data中的数据

  data() {
    return {
      name: "Grayly"
    };
  },  
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      alert("hello" + vm.name);
    })
  },
 

(2)  beforeRouteUpdate

这个方法是vue-router 2.2版本加上的。因为原来的版本中，如果一个在两个子路由之间跳转，是不触发beforeRouteLeave的。这会导致某些重置操作，没地方触发。在之前，我们都是用watch 的。但是通过这个勾子，我们有了更好的方式。

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
 

（3）beforeRouteLeave

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
可以访问组件实例 this

  beforeRouteLeave: (to, from, next) => {
    if (confirm("你确定要离开吗") == true) {
      next();
    } else {
      next(false);
    }
  },
 

返回上一级路由

      第一种：history.back();
 
      第二种：this.$router.go(-1);

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

1.基本使用

(1)安装

①初始化项目时选择安装vue-router

②手动安装

npm i vue-router --save

(2)基本使用

第一步：创建几个页面组件

第二步：在/src/main.js中引入vue-router插件，并引入页面组件、定义路由规则

import VueRouter from 'vue-router'
Vue.use(VueRouter)//在vue中使用插件【重要】
//引入页面组件
import Home from './components/Home'
import Movie from './components/Movie'
import Music from './components/Music'
var router = new VueRouter({
    //路由规则地址与页面组件的配置映射关系表
    routes:[
        { path:'/home',component:Home },
        { path:'/movie',component:Movie },
        { path:'/music',component:Music },
    ]
})

path属性表示浏览器地址关键词，要以斜杠开头

component属性表示路由地址关键词对应的页面组件

第三步：在/src/App.vue中添加路由出口组件

<div id="app">
    <!-- 
        路由出口 
        根据当前浏览器中的地址与路由规则映射表进行匹配，匹配到之后，就把对应的组件模板内容展示在路由出口的位置上。
    -->
    <router-view></router-view>
</div>

2.路由导航

(1)内置组件

router-link 会在页面上生成一个超链接。

属性：

①to

需要设置一个to属性，它的值是设置路由映射规则时的path属性值。

to属性的值，必须以斜杠开头，不然会出现地址异常的现象。

②active-class

active-class 非必填项，模糊匹配的类名，可以用来设置激活的导航类名

写在router-view上方或者下方的router-link会一直在页面中显示。

③exact-active-class

精确匹配的类名，只有访问的路由规则地址和to属性中一模一样时才会设置上对应的类名

(2)编程式导航

vue-router类的实例中给提供了一些方法，可以实现页面跳转

push 此方法会把当前访问的页面作历史记录，然后跳转到指定的路由规则上

replace 此方法会用即将跳转的路由规则地址替换当前访问的页面路由规则地址

go 此方法可以进行页面路由地址的回退，一般写-1，表示回退到上一个访问的页面

<button @click="$router.push('/movie')">前往电影页面</button>

<button @click="toMusic">前往音乐页面</button>

<script>
export default {
    methods:{
        toMusic(){
            this.$router.replace('/music')
        }
    }
}
</script>

<button @click="$router.go(-1)">返回</button>

3.路由重定向

如果需要展示默认的一个页面或者当用户输入不存在的路由规则时，扔让用户看到一个默认的页面时，可以使用路由重定向（路由地址跳转）。

routes:[
	....,
	{ path:'*',redirect:'/home' }
]

*表示所有的路由规则都没有匹配到

redirect表示要重定向到的路由规则path属性值

4.路由嵌套

第一步：再创建几个页面组件

第二步：在一级路由规则中添加一个children属性，它的值和routes数据类型相同，都是一个数组。

routes:[
    { path:'/home',component:Home },
    { 
        path:'/movie',
        component:Movie,
        children:[
            { path : 'guonei' , component:Guonei},
            { path : 'guowai' , component:Guowai}
        ]
    },
    { path:'/music',component:Music },
    { path:'*',redirect:'/home' }
    // {path:'*',component:Home}
]

子级路由规则的path属性不需要添加斜杠

第三步：在子级路由的父级路由规则对应的页面组件中添加router-view组件，用来展示子级路由规则对应的页面组件内容。

<template>
    <div class="movie">
        <h1>movie页面</h1>
        <router-link to="/movie/guonei">国内</router-link>
        <router-link to="/movie/guowai">国外</router-link>
        <router-view class="content"></router-view>
    </div>
</template>

5.路由传参

(1)动态路由

动态路由规则定义：

{ path:'/关键词/:参数名' }

冒号后面是一个参数名，能够在进行路由规则匹配时，能够匹配到任意的字符或者数字。

第一步：创建一个详情页面

第二步：在路由配置文件中定义一个动态的路由规则

{
	path:'/movieinfo/:mid',component:MovieInfo
}

第三步：在电影列表页面通过编程式导航进行页面跳转

 methods:{
     toInfo(id){
     	this.$router.push('/movieinfo/'+id)
     }
 }

第四步：在电影详情页面获取路由地址中的参数

<p>编号：{{ $route.params.mid }}</p>

(2)query查询参数

如果路由地址中的参数数量不固定时，使用动态路由就不合适了。

第一步：定义一个固定的路由规则

{
    // path:'/movieinfo/:mid',component:MovieInfo
    path:'/movieinfo',component:MovieInfo
}

第二步：在电影列表页面通过编程式导航进行页面跳转

methods:{
    // toInfo(id){//动态路由
    //     // this.$router.push('/movieinfo/'+id)
    // }
    toInfo(obj){//查询参数
        // this.$router.push('/movieinfo/'+id)
        this.$router.push({
            path:'/movieinfo',
            query:{
                movieid:obj.id,
                title:obj.title
            }
        })
    }
}

第三步：在电影详情页面获取路由地址中的参数

mounted(){
    console.log(this)
    // this.info = this.movies.find(item=>{
    //     return item.id == this.$route.params.mid
    // })
    this.info = this.movies.find(item=>{
    	return item.id == this.$route.query.movieid
    })
}

1.路由模式

/src/router/index.js，和routes平级的一个属性

默认模式是hash，在浏览器地址中会有一个#，#号后面的内容会被解析成路由规则，并进行匹配，如果匹配到指定的路由规则，则展示其对应的组件内容（页面不会刷新，只是局部内容发生了变化）。

history模式，最直观的是在浏览器地址中没有了#，它更多的使用html5中的history.pushState API来完成 URL 跳转而无须重新加载页面。项目打包后部署到服务器上需要配合后端（Nginx、Apache、Tomcat）进行重写规则的设置（不然会出现404）。

2.路由命名

每一个路由规则都可以设置一个name属性，在进行路由跳转并传递参数时，使用命名的路由会比较方便。

路由规则添加name属性：

{ 
    name:'xiangqing',
    path:'student/:id',
    component:StudentInfo 
}

在跳转页面时，使用name属性进行路由跳转及参数的传递

methods:{
    toInfo(id){
        // this.$router.push('/index/student/'+id)
        this.$router.push({
            name:'xiangqing',//通过路由name进行跳转
            params:{id:id}
        })
    }
}

3.路由别名

通过alias属性，可以给每一个路由规则设置一个别名，别名和path属性的路由都可以访问。

{ 
    path:'/login',
    component:Login,
    alias:'/denglu'
}

4.路由懒加载

import Index from '@/components/pages/Index'
import Login from '../components/pages/Login'
import Student from '../components/pages/Student'
import StudentInfo from '../components/pages/StudentInfo'
import Setting from '../components/pages/Setting'

这种方式会在vue加载vue-router配置文件时把对应的页面组件都加载一次，会造成资源消耗比较大。可以在路由规则中引入组件，实现匹配到指定的路由规则时才会加载对应的页面组件

{
	path:'/index',
	component:()=>import('../components/pages/Index')
}

5.路由守卫

路由守卫可以在路由规则执行之前或者之后执行一定的操作，从而实现对用户身份的验证。

(1)路由独享守卫

在定义路由规则时，可以给某一个路由规则设置守卫。

beforeEnter钩子函数会在某一个路由规则匹配到时，自动的触发，从而实现一定的验证效果

{ 
    path:'/关键词',
    component:()=>import('页面组件'),
    beforeEnter:(to,from,next)=>{
        ...
    }
}

在beforeEnter钩子函数中可以接收3个参数

①to 目标路由规则

②from 来源路由规则

③next 函数，用来执行默认的路由规则或者指定的路由规则

next();//执行默认路由规则
next(false)//终止路由规则的执行
 next('/index')//执行指定的路由规则

(2)组件守卫

①beforeRouteEnter

当路由规则匹配的组件被访问前，会自动的触发此钩子函数

示例代码：

在首页组件中来验证用户有没有登录，如果没有登录则只能访问到登录页面

<script>
export default {
    beforeRouteEnter(to,from,next){
        //如果本地存储中没有用户信息，则认为用户没有登录
        //用户没有登录的情况下，只能访问到登录页面
        var userinfo = localStorage.getItem('users');
        if(!userinfo){
            next('/login')
        }else{
            next();
        }
    }
};
</script>

②beforeRouteUpdate

在动态路由规则地址参数发生变化时，会自动的触发此钩子函数

示例代码：

beforeRouteUpdate(to, from, next) {
     console.log(to);
     console.log(from);
     console.log(next);
}

注意：路由模式是history时，不会触发此钩子函数

③beforeRouteLeave

当要离开某一个路由规则之前，会触发此钩子函数

示例代码：

<script>
    export default {
     	beforeRouteLeave(to, from, next) {
            if( window.confirm("确定要从此页面离开吗？")){
                next();
            }else{
                next(false)
            }
        }   
    }
</script>

(3)全局守卫

全局守卫会应用到项目中所有的路由规则

/src/router/index.js

①全局前置守卫

router.beforeEach((to,from,next)=>{…})

项目中所有的路由规则访问前会自动的触发此钩子函数

②全局后置守卫

router.afterEach((to,from)=>{…})

项目中所有的路由规则访问后会自动的触发此钩子函数

示例代码：

var router = new Router({...})
//全局前置守卫
router.beforeEach((to,from,next)=>{
    console.log('前置守卫...')
    //如果用户访问的不是登录页面，才去验证用户有没有登录
    //如果本地存储中没有用户信息，则认为用户没有登录
    //用户没有登录的情况下，只能访问到登录页面
    if(to.fullPath!='/login'){
        var userinfo = localStorage.getItem('users');
        if(!userinfo){
            next('/login')
        }else{
            next();
        }
    }else{
        next();
    }
})
//全局后置守卫
router.afterEach((to,from)=>{
    console.log('后置守卫...')
    console.log(to)
    console.log(from)
})
export default router;