Vue day9

------------恢复内容开始------------
导航守卫
全局有两个
全局前置守卫

router.beforeEach((to, from, next) => {              //全局前置其有三个参数，to要跳转的路由，from之前的路由，next相当于express的中间件的next，拦截器，如果不调用next无法进入，

       console.log(to);
       console.log(from);
       next('/two');                 next方法与push replace方法一样，参数可以是字符串或者对象                    
     });

路由源信息
meta 给每个对象挂载一些额外数据，根据你的需求，可以实现登录鉴权

 {
          path: "/mycenter",
          name: "mycenter",
          component: mycenter,          
          meta: { needlogin: true },               
        },

获取：路由对象.meta

路由后置守卫

router.afterEach((to, from) => {                          //其已经进入了目标路由，拦截不了。，没啥卵用
        // to and from are both route objects.
        console.log(to, from);
      });

路由独享
路由独享守卫
拦截特定路由
{
path: "/mycenter",
name: "mycenter",
component: mycenter,
beforeEnter: (to, from, next) => { //在特定路由里面定义beforeEnter属性，其参数和全局前置守卫语音
const gettoken = localStorage.getItem("regintoken");
if (gettoken) {
next();
} else {
console.log(to.path);
next({
name: "region",
query: {
from: to.path,
},
});
}
},
},

组件内部
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

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

过渡动效

 <transition name="guodu" mode="out-in">        
        <router-view></router-view>                   //直接transition标签包裹路由出口标签就行
      </transition>

<style>
     .guodu-enter {
       transform: translateX(-100%);
     }
     .guodu-enter-active,
     .guodu-leave-active {
       transition: all 0.5s;
     }
     .guodu-leave-to {
       transform: translateX(100%);
     }
     html {
       overflow-x: hidden;                //去掉过渡的横向滚动条
     }
   </style>

滚动行为

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置                       savedPosition属性可有可无
  }
})