欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

路由守卫

程序员文章站 2022-03-21 13:17:24
全局路由守卫// route/index.jsexport default new Router()let router = new Router()// 全局路由守卫router.beforeEach((to, from, next) => {// 进入每一个路由之前都会执行这个回调函数// to 将要访问的路由对象// from 将要离开的路由对象// next 是一个函数,决定着是否能正常访问路由 next() next("/login")})e.....
  • 全局路由守卫

    // 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

相关标签: vue.js