Vue-router 导航路由

 1.全局路由守卫

       1> 前置路由守卫

   作用：进行权限设置路由，在跳转之前调用

   使用：1.在配置路由index.js文件里面进行配置            

 meta:{

       isAuth:true,//是否进行权限的校验

        title:'信息'

        }

   

    使用router里面的方法

const router = new VueRouter({
    routes,
    // 默然的情况下，是当路由发送跳转的时候，滚动条的位置是不发生改变的
    scrollBehavior(to, from, savedPosition) {
        // 始终滚动到顶部
        return { y:0}
      },
})

    // 使用全局前置,to是去哪里，from是当前的，next是是否跳转

    // 我们还需对路由进行配置是否进行权限的校验,在meta里面进行配置       

Vrouter.beforeEach((to,from,next)=>{

        if(to.meta.isAuth)
        {
            if(localStorage.getItem('school') === 'wtu')

            {
                next();//放行，跳转
            }
        else{
                alert('学校名不对')
            }

         }
         else
        {
            next();//不需要校验就直接跳转
         }

        });

   

// 设置全局前置路由守卫,什么条件下可以发生路由跳转
router.beforeEach(async (to,from,next)=>{
  // 首先看是否登录
  let token = store.state.user.token;
  let name = store.state.user.userInfo.userName;
  if(token)
  {
       if(to.path == '/login')
       {
         next('/')//重新定向，不去登录页面
       }
       else
       {
        //  用户的信息是否存在
         if(name){
              next();
         }
         else
         {
            //  进行一个信息的获取
          try {
            await store.dispatch('user/getUserInfo');
              // 获取信息成功后再放行
              next()
            } catch (error) {
              // 如果出现错误，则是token过期
              // 退出登录，重新登录
              store.dispatch('user/userLoginOut');
              next('/login')//回到登录页面
            }
         }
       }
  }
  else
  {
    console.log('next3');
       next();
  }
})

 2> 后置路由守卫

    2.作用：在跳转以后调用

//  这个是跳转完成后调用

        Vrouter.afterEach((to,from)=>{

        // 改变网页的title

        if(to.meta.title)

        {
            document.title = to.meta.title;
        }
         else

        {
            document.title = 'vue';

        }
        });

   3>全局解析守卫

     你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。这里有一个例子，确保用户可以访问自定义 meta 属性 requiresCamera 的路由：

        router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

2.路由独享守卫

     在配置路由的时候加入，就这一个函数

     作用：beforeEnter 守卫 只在进入路由时触发，你也可以将一个函数数组传递                给 beforeEnter，这在为不同的路由重用守卫时很有用

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

在配置路由的是配置，只有一个函数beforeEnter(to,from,next)

        beforeEnter(to,from,next)
              {
                if(to.meta.isAuth)
                {
                    if(localStorage.getItem('school') === 'wtu')
                    {
                        next();//放行，跳转
                    }
                    else{
                        alert('学校名不对')
                    }
                }
                else
                {
                    next();//不需要校验就直接跳转
                }
              }

   

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

 3.组件内的守卫

在需要进行权限校验的路由组件里面配置，有三个个方法，但是不叫前置和后置

   组件通过路由规则，在进入组件的时候调用
    beforeRouteEnter(to,from,next)
    {

    },
    //  组件通过路由规则，在离开组件的时候调用，如果不离开就不掉用
    beforeRouteLeave(to,from,next)
    {
        
    }

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

 4.缓存路由守卫

1.作用：是路由组件能够持续挂载，在切换的时候不被销毁，能够在返回的时候，有的数据还是存在的

2.使用方式：在需要展示某个路由组件的地方加入 keep-alive标签

  设置缓存组件 加入一些限定，哪些组件是要被缓存的，是要include，里面是组件名，不加的话就都被缓存了         

<!-- 表示News组件别缓存，在切换的时候不会被销毁-->

          <keep-alive include="News">

          <router-view></router-view>

          </keep-alive>

 <!-- 多个组件需要缓存，就要把include写成数组 -->

          <keep-alive :include="[News,Message]">

          <router-view></router-view>

          </keep-alive>

   两个新的生命钩子

   1.这个是路由组件独有的两个生命钩子

   2.activated()  当组件被呈现的时候就被激活

   3.deactivated()  当组件被切换走就失活
   

 activated()

    {

       this.timer = setInterval(()=>{

         console.log('@');

         this.opacity-=0.01

         if(this.opacity<=0) this.opacity = 1;

       })

    },

 // 当组件失活的时候，销毁定时器

    deactivated()

    {

        clearInterval(this.timer);

    }

    <!-- 注意：当你又想缓存，但是不能让一些耗时的或者定时器一直执行造成内存泄漏，就需要这两个生命钩子 -->