vue导航守卫、导航钩子函数及滚动

最新推荐文章于 2024-09-06 17:00:53 发布

李码王

最新推荐文章于 2024-09-06 17:00:53 发布

阅读量160

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50220069/article/details/109901735

版权

导航守卫、导航钩子函数

监听甚至拦截路由变化

全局守卫（拦截所有的路由）

// 全局前置 守卫
router.beforeEach((to,from,next)=>{
  // to 目标路由 
  // from 从哪来路由
  // next 拦截器 不调用next()路由无法进入,next参数同router-link to属性的值，重定向地址
  next()
})
// 全局后置守卫
router.afterEach((to,from)=>{

})

路由独享的（定义在路由规则中，只拦截这个路由）

const routes = [
  {
    path:"/news",
    beforeEnter(to,from,next){

    },
    component:News
  }
]

组件内部

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

// 面试题  如何 监听 动态路由参数的变化
{
  watch:{
    '$route'(to,from){

    }
  },
  beforeRouteUpdate(to,from,next){

  },
}

滚动位置

const router = new VueRouter({
  mode,
  routes,
  scrollBehavior (to, from, savedPosition) {
    // savedPosition切换路由时，切出路由的 滚动条位置 {x:number,y:number}
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})