Vue学习3

全局守卫

//mian.js
//全局守卫
router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path='/register'){
    next();
  }else{
    alert("还没有登录，请先登录");
    next('/login');
  }
})

后置钩子

//main.js
router.afterEach((to,from)=>{
  alert("after each");
})

路由独享守卫

//index.js
{
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      beforeEnter:(to,from,next)=>{
        if(to.path == '/login' || to.path='/register'){
          next();
        }else{
          alert("还没有登录，请先登录");
          next('/login');
        }
      }
    }

组件内守卫

//对应.vue
data(){
        return{
          name:"Henry",
        }
      },
      /*beforeRouteEnter:((to,from,next)=>{
        alert("hello"+this.name);
        next();

        next(vm=>{
          alert("hello"+vm.name);
        })
      })*/
      //两个方法二选一
      beforeRouteLeave:((to,from,next)=>{
        if(confirm("确定离开吗?")==true){
          next();
        }else{
          next(false);
        }
      })

路由复用

//index.js
{
      path: '/',
      name: 'Home',
      components:{
        default:Home,
        'OrderingOutside':OrderingOutside,
        'Delivery':Delivery,
        'History':History
      }
    }

//App.vue
<div>
      <div class="row">
        <div>
          <router-view name="OrderingOutside"></router-view>
        </div>
        <div>
          <router-view name="Delivery"></router-view>
        </div>
        <div>
          <router-view name="History"></router-view>
        </div>
      </div>
    </div>

控制滚动行为

//index.js
 scrollBehavior(to,from,savedPosition){
    //return{x:0,y:100}
    //return {selector:'.btn'}
    if(savedPosition){
      return savedPosition
    }else{
      return {x:0,y:0}
    }
  },

fetch请求

fetch(url,{
        method:"post",//请求类型
        headers:{
          "Content-type":"application/json",
          token:"",
        },
        body:JSON.stringify({username:"bucky",password:"123456"})  //参数
      }).then(result=>{
        return result.json()
      }).then(data=>{
        console(data);
      })

axios请求

import axios from 'axios'
axios.defaults.headers.common['token']="";
axios.defaults.headers.post["Content-type"]="application/json"

Vue.config.productionTip = axios	
***
***
this.$axios.post(url,params,).then(data=>{
        console.log(data)
      })

解决跨域问题

 proxyTable: {
      '/apis':{
        //测试环境
        target:"http://www.aaaa.com/",//接口名称
        changeOrigin:true,//是否跨域
        pathRewrite:{
          '^/apis':'' //需要rewrite重写的
        }
      }
    },