vue中的路由的那些事

一、导航守卫

1、全局守卫
router.beforeEach

image.png

router.beforeEach 很常用，比如验证用户的token等；

这里需要注意的是，一定要确保调用next方法，否则钩子不会被resolved

2、全局解析守卫
router.beforeresolve
在 2.5.0+ ，新增的全局解析守卫，和router.beforeEach 类似，区别是同时在所有组件内守卫和异步路由被解析之后，解析守卫就被调用

3、全局后置钩子

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

这里的钩子不会接受next函数也不会改变导航本身

4、路由独享的守卫
我们可以在路由的配置文件index.js 上定义beforeEnter 守卫

image.png

这个比较常用，比如在用户进入组件前验证他的权限、或者获取各个组件都需要用到的数据等

5、组件内的守卫
beforeRouteEnter、beforeRouteUpdate (2.2 新增--因为参数或者查询导致路由的改变不会触发进入或者离开的导航守卫，所以新增了这个，当然也可以使用watch $route 对象来应对变化) 、 beforeRouteLeave

顾名思义，这三个是在组件中使用，其中beforeRouteLeave 比较实用，比如用户填写信息未完成要离开的时候我们可以给他警告；

  export default {
    beforeRouteLeave(to, from, next) {
      if (confirm('你确定离开?')) {
        next(true)
      } else {
        next(false) // next 里的false表示 中断当前的导航 如果url改变了 就会重置到from路由对应的地址
      }
    },
}

二、路由懒加载技术

//官方写法
const app = () => import('@/components/app')
const router = new VueRouter({
  routes: [
    { path: '/app', component: app }
  ]
})
//  简写 
const router = new VueRouter({
  routes: [
    { path: '/app', component:  () => import('@/components/app')}
  ]
})

三、history模式注意事项

具体可见 vue项目二级路由刷新后样式丢失、错乱的解决方案及手机端实时访问npm run dev后的项目

四、vue 实现浏览器回退记忆位置的方法

一定要使用history 模式才能实现
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html


 const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
      }
     }，
   routes: [...]
 })

五、路由组件传参

路由组件传参有三种方式：布尔模式、对象模式和函数模式，如下图（含注释部分）

image.png

，

接下来我们在组件中使用this.id/this.objModule/this.funModule调用即可。
当然你也许会说干嘛那么复杂我直接this.$route.params.id就可以拿到路由参数id了啊，其实使用props是为了组件与$route进行解耦。

可参考 https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F

另外，如果网址为http://xxxxxxxx/?query=查询符值1#/prop/66/name?query=查询符值2，我们使用this.$route.query得到的是{query:查询符值2}，如果想得到查询符值1，可以使用以下正则：

  function getSearchParam(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return decodeURIComponent(r[2]);
    }
    return '';
  }

最后编辑于：2020.06.18 10:49:36