路由守卫

• 全局路由守卫

  // route/index.js
  export default new Router()
  let router = new Router()
  // 全局路由守卫
  router.beforeEach((to, from, next) => {
  	// 进入每一个路由之前都会执行这个回调函数
  	// to 将要访问的路由对象
  	// from 将要离开的路由对象
  	// next 是一个函数，决定着是否能正常访问路由  next()  next("/login")
  	
  	
  	
  })
  export default router
  

• 路由内守卫

  {
  	path: "/cart",
  	component: Cart,
  	// 只有进入购物车路由的时候才会执行
  	beforeEnter(to, from, next) {
  	
  	}
  }
  

• 组件内守卫

  beforeRouteEnter() {}
  beforeRouteLeave() {}
  beforeRouteUpdate() {}
  

axios (重点)

axios第三方， Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官网：http://www.axios-js.com/

基本使用

• get

  axios.get("接口名称?id=1&xxx=xxx").then(res=> {
  	// res.data
  }).catch(err => {
  
  })
  axios.get("接口名称", {
  	params: {
  		id: 1,
  		xxx:2
  	}
  }).then(res=> {
  	// res.data
  }).catch(err => {
  
  })
  

• post

  axios.post("接口名称", {
  	id: 1
  }).then(res => {
  
  })
  

• 全局配置

  // main.js
  
  import axios from 'axios'
  Vue.prototype.$http = axios
  
  //组件
  this.$http.get()
  this.$http.post()
  

代理的配置

// config/index.js
proxyTable: {
	"/api": {
		target: "http://localhost:3000",
		changeOrigin: true,
		pathRewrite: {
			"^/api": "/api"
		}
	}
}

封装（企业）

// src/http/index.js
/**
 * 重写get 和 post
 * 因为基础用法的get和post无法携带请求头，也就无法传递token
 */

import axios from 'axios'
import router from '../router/index'


 let instance = axios.create({
     baseURL: "/api",
     timeout: 6000
 })

 // 请求拦截，所有的http请求都会被拦截下来
 instance.interceptors.request.use((config) => {
    // config 关于请求的所有信息
    console.log(config)
    // 
    config.headers.token = "123456"
    return config
 })


 // 相应拦截
 instance.interceptors.response.use((res) => {
    console.log(res)
    if (res.data.code == "401") {
        // 跳到登录页
        router.push("/my/login")
    }
    return res
 })


 // {id: 1}
 function get(url, params) {
    return instance.get(url, {
        params
    })
 }

 function post(url, params) {
     return instance.post(url, params)
 }


 export default {
     get,
     post
 }
 
 
 // main.js
 import http from './http/index'
 Vue.prototype.$http = http
 
 // 组件内
this.$http.get("接口地址", {
id: 1
}).then(res => {

})
this.$http.post("接口地址", {
id: 1
}).then(res => {

})

stylus

less，scss，stylus都是css的预处理器

下载

cnpm i stylus stylus-loader --save

Cnpm i less less-loader --save

使用

<style lang="stylus">
	color = red
	
	add()
		return
	* 
		padding 0
		margin 0
	html
		body
			width 100%
			color color
</style>

本文地址：https://blog.csdn.net/qq_44295192/article/details/108588877