vue-router 路由理解

一、导航守卫

     1、全局前置守卫 router.befoeEach(to,form,net)
         每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

  注：to   是将要访问的路由的信息对象
         from 是将要离开的路由的信息对象
         next 是一个函数，调用next() 表示放行，予许这次路由导航

//全局路由守卫

//可控制页面访问权限--登录
router.beforeEach((to,form,net)=>{
  // to   是将要访问的路由的信息对象
  // from 是将要离开的路由的信息对象
  // next 是一个函数，调用next() 表示放行，予许这次路由导航
})

 2、全局后置钩子

router.afterEach(function (to, from) {
  //每次发生路由的跳转之后，都会触发全局后置钩子，用的比较少
  //可以用于修改title
})

注意：全局后置钩子是没有第三个参数中的 next 的
 

3、路由独享守卫

      独有的路由守卫，与全局前置路由守卫没啥区别，只是作用的范围不同罢了，详细见代码：

	...
     { 
        path: 'user',
        component: login,
        meta: { isAuth: true, title: '用户信息'  },
        beforeEnter: (to, from, next)=>{
		   // ...
        }
      }
   ...

注意：独享路由守卫是没有后置路由守卫的

 4. 组件内路由守卫

组件内路由守卫，写在组件内部的

export default {

  name: 'MyComponents',

  // 通过路由规则，进入该组件时被调用

  beforeRouteEnter(to, from, next){

    // ...

  },

  // 通过路由规则，离开该组件时被调用

  beforeRouteLeave(to, from, next){

    // ...

  }

}

注意：是没有前置后置可分的，因为beforeRouteLeave是离开该组件时才会被调用，并不是跳转之后就调用的

二、路由有两种工作模式

路由有两种工作模式，分别是：hash 和 history
默认开启的就是 hash 的工作模式
# 就是代表 hash ，后面就是 hash 值
注意：# 后面的值都是不发给服务器的

开启 history 模式要添加一个 mode配置项 ，默认是 hash

三、vue-router 的常见用法

1. 路由重定向
2. 嵌套路由
3. 动态路由匹配

四、声明式导航 & 编程式导航

  vue 项目中点击 <router-link> 都属于声明式导航
  调用 API 方法实现导航的方式，叫做编程式导航

  4.1、vue-router 中的编程式导航 API

     this.$router.push(‘hash 地址’)       跳转到指定 hash 地址，并增加一条历史记录
     this.$router.replace(‘hash 地址’)    跳转到指定的 hash 地址，并替换掉当前的历史记录
     this.$router.go(数值 n)                   实现导航历史前进、后退
     this.$router.back()                         在历史记录中，后退到上一个页面
     this.$router.forward()                    在历史记录中，前进到下一个页面

     this.$route.query                          对象访问到动态匹配的参数值 
     this.$route.params                       对象访问到动态匹配的参数值 

    注：push 会增加一条历史记录、replace 不会增加历史记录，而是替换掉当前的历史记录
    使用 props 接收路由参数

this.$router.push({
         path: '/checkout',
         query:{
               productId:id,
          }
}）
//在url中形式（url中带参数）
http://xxx/#/goodsDetails?productId=150642571432849
this.$route.query.productId


// An highlighted block
this.$router.push({
         name: 'checkout',
         params:{
               productId:id,
          }
}）;
在url中形式（url中不带参数）
http://172.19.186.224:8080/#/checkout

this.$route.params.productId

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。示例代码如下：

{path:'/vovie/:id',component:indexedDB,path:true}


<template>
  <div>组件{{id}}</div>
</template>

<script>
export default{
  props: ['id']  //使用Props 接收路由规则中匹配参数到的参数项
}
</script>

五、this,$router与this.$route区别

this.$router：全局的路由对象，包含和很多属性和对象，任何页面都可以调用其方法。
this.$route：当前路由对象，是一个局部的路由对象，每一个路由都有一个route对象，可以使用其属性。