VueRouter的编程式导航和导航守卫

编程式导航

Vue Router 提供了编程式导航的方法，这意味着你可以在 JavaScript 中编写代码来导航到不同的路由。这通常在处理用户交互或其他异步操作时很有用。

要实现编程式导航，你可以使用?this.$router.push()?方法。这个方法接受一个路由对象或者一个路由路径字符串作为参数。

// 编程式导航进行页面跳转
      this.$router.push('/details');//只跳转页面
      this.$router.push({path:'/details'});//只跳转页面

?1.name params跳转并传参 参数不会携带在地址栏，是一次性数据携带，刷新页面数据丢失
? 2.path query跳转并传参 参数会携带再地址栏，刷新页面数据不会丢失?
? 3.path params传参是不生效的,name query传参是生效的，模式和path query一样

 //编程式导航传递参数方式****************
       path params 传递参数不生效
       1.name params跳转并传参 一次性数据携带 刷新页面数据丢失
       this.$router.push({
         name:'Details',
         params:row
       })
       2.path query或者name query 刷新页面数据不丢失
      this.$router.push({
        // path:"/details",
        name:"Details",
        query:row
      })

?push方法 replace方法区别？
? ? push方法跳转的会向浏览器添加一条新的历史记录
? ? replace方法跳转不会向浏览器添加历史记录

       //replace方法进行页面跳转并传参
       
       this.$router.replace({
       path:'/details',
        query:row
      })

路由模式？

hash history?区别？
? 1.hash模式在地址栏上会携带#,history模式url正常。
? 2.hash模式回车刷新会重新载入路由，history回车刷新会请求服务器，一般报错，需要后端支持。
? 3.hash模式原理利用hashchange中事件对象中newURL,oldURL之类属性
? 4.history利用history对象中api,h5新增pushState,replaceState,go,back,forward
? 5.hash支持低版本浏览器,history模式利用h5新增API

导航守卫

全局守卫

全局前置守卫

router.beforeEach((to,from,next)=>{
? ? ? ? 路由拦截 ---用户身份验证
? ? ? ? if(to.path!='login' && ){
? ? ? ? ? next('/login')?
? ? ? ? }else{
? ? ? ? ? next()
? ? ? ? }
? ? ? })

全局后置守卫

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

路由独享守卫

进入到该路由触发 做路由拦截
? ? beforeEnter(to,from,next){
? ? ? if(from.path!='/myA'){
? ? ? ? next(false)
? ? ? }else{
? ? ? ? next()
? ? ? }
? ? }

组件内导航守卫

// 路由改变进入组件的时候触发---进入该路由对应的组件
      beforeRouteEnter(to, from, next) {
        console.log(this, to, from, next, 'beforeRouteEnter', 'this指向window全局对象');
        next();
      },
      // 路由改变 该组件被复用时候触发---更新该路由对应的组件
      beforeRouteUpdate(to, from, next) {
        console.log(this, to, from, next, 'beforeRouteUpdate');
        next();
      },
      // 路由改变 离开路由对应组件时候触发--离开该路由对应的组件
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        console.log(this,to,from,'beforeRouteLeave')
        next();
      }