vue-router的进阶使用

Posted 2021-05-25 彡心如止水彡

官网

滚动行为

传统开发 当页面切换的时候 滚动条距离页面的高度为0

单页面开发 页面切换时，滚动条距页面高度没有变化

解决：使页面不管是加入还是后退页面高度都为0

在 router.js 中的router同级加入

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 0)
  })
}

导航守卫

全局前置守卫

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

将内容放在main.js中

作用：1.设置标题 从meta中获取 2.过滤页面判断是否登录，若不登陆则跳到登录页面

next的使用 是否跳转 1.可以向push的内容一样 如next("/logo") 或 next({name:xx}) 2.默认内容true 若为false 则不跳转

全局后置钩子

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

和上面一样 就是在页面 跳转完成后调用

组件内的守卫

beforeRouteEnter

和生命周期函数使用一样

不！能！获取组件实例 this

在进入该页面之前应该做什么 比如指定只能从哪个页面进入

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },

beforeRouteUpdate

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

调用同一个组件时调用这个函数，为什么会调用同个组件呢

因为参数不同到时候发axios内容就不同

beforeRouteLeave

 beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

使用：1 在表单页面时提醒用户是否保存

2 清除定时器

路由元信息

 {
          path: \'bar\',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }

作用就是在这个路由上有一个指定的内容

使用 ： 一般定义页面标题

过渡动效

<transition>
  <router-view></router-view>
</transition>

设置动画

使用：在进入子页面使用从右到左 返回从左到右

进入同等级的页面 滑动显示

<transition :enter-active-classs="d1">
  <router-view></router-view>
</transition

watch: {
  \'$route\' (to, from) {
    const a = to.path.split(\'/\').length
    const b = from.path.split(\'/\').length
    if(a>b){this.d1=""}else if(a<b){}else{}
  }
}

路由懒加载

 

{
      path:"/page1",
      name:"page1",
      component:() => import(\'@/components/Page1.vue\'),
    },

这里写了import就不要在上面在加入import

根据需求加载，不会一开始全部加载