vue路由守卫、vue-ajax请求

1.vue路由守卫

路由守卫也叫路由钩子函数，它是在路由跳转过程中调用的函数，通过路由守卫可获取路由信息和阻止路由跳转。

1.1 路由守卫三种分类

1.1.1 组件内的路由守卫

beforeRouteEnter()、beforeRouteLeave()、beforeUpdate()

 export default {name: "About",data() {return {keyword: ""}},methods: {search() {// 点击搜索按钮时，跳转到搜索页(当前页)this.$router.push("/search");// 如果当前页直接跳转当前页会报错// 原因：原路由url和新路由url完全一致，会报错，路由避免重复跳转// 解决方案：在路由跳转时传入一个参数，参数不同就不会报错this.$router.push("/search?key=" + this.keyword)}},// 在组件中有三个路由首位函数beforeRouteEnter(to, from, next) {// 在路由跳转到到这一页之前，执行这个函数console.log("路由即将进入about");// 默认，这个守卫函数会阻止路由跳转到这一页console.log(from.path, to.path);next();},beforeRouteLeave(to, from, next) {// 在路由将要从这一页离开之前，执行这个函数// 默认，这个守卫函数会阻止路由离开next(); //允许路由离开},beforeEouteUpdate(to, from, next) {// 当路由更新之前，执行这个函数,当前页跳转到当前页表示路由更新console.log("路由更新");},}

1.1.2 全局路由守卫

beforeEach()、afterEach()

全局路由守卫是通过路由配置对象router调用

// 全局路由守卫通过路由配置对象router调用
router.beforeEach(function(to, from, next) {console.log("全局守卫：路由跳转之前");next()
})
router.afterEach(function() {console.log("全局守卫：路由跳转之后");// 路由跳转后调用此函数，不需要next，无法拦截路由
})

1.1.3 单个路由守卫

beforeEnter()

单个路由守卫是在作为路由的配置对象中，只对当前路由起效

const routes = [{path: '/',name: 'home',component: HomeView,// 单个路由守卫写在路由的配置对象中，只能对当前路由起效,是对象中函数beforeEnter: (to, from, next) => {console.log("主页守卫：", from.path, to.path);next()}}
]

1.2 路由守卫的参数

to：表示路由跳转的目标信息对象(到哪儿去)
from：表示路由跳转的来源信息对象（从哪儿来）
next：回调函数，表示是否允许路由跳转，调用允许，不调用则禁止

1.3 路由守卫的使用场景

beforeRouteEnter、beforeRouteLeave、beforeEach 这三个都是路由进入之前的守卫，这些路由守卫常用于做登录认证，在这里判断用户是否已经登录，如果已经登陆，调用next()允许进入，如果没有登录，不调用next()，禁止进入，主要针对一些需要登陆状态才能访问的页面，如：个人信息页
beforeRouteLeave 是路由离开之前的守卫，在一些表单页面，在这个函数中提示，离开页面，填写的表单信息会丢失，如：在线测试页面，测试提交之前，不允许离开这一页
beforeUpdate 是路由更新时调用的钩子函数，当路由路径来源和目标相同（当前页跳转当前页），并且参数不同时，会调用这个钩子，常用于搜索页，当搜索关键字改变时，在这里更新数据。

1.4 使用路由守卫注意问题

1.4.1 由于在任何组件中都能使用this.$router,所以全局路由守卫可以在任意组件中调用

1.4.2 brforeRouteEnter路由进入之前，组件还未创建，打印this是undefined，如果想用组件对象，可以在next()的回调中拿到组件对象

next( vm=>{ console.log(vm) })

1.4.3 this.router和this.router和this.router和this.route的区别

this.$router是/src/router/index.js中创建的路由对象，全局唯一，用于编导式导航跳转和全局路由守卫
this.route是路由跳转的信息对象，每一个路由对应一个route是路由跳转的信息对象，每一个路由对应一个route是路由跳转的信息对象，每一个路由对应一个route对象，用于路由传值和路由监听

1.4.4 路由监听和路由守卫的区别

路由监听：在组件中watch字段中监听$route，实现路由监听，只能监听路有变化，不能修改路由和限制路由跳转
路由守卫：使用路由钩子函数实现守卫，路由不知可以监听路由，还能控制路由跳转

1.4.5 当路由跳转时，跳转的路径和参数与当前完全一致，没有变化，不会调用路由钩子函数，会报错

报错：NavigationDuplicated: Avoided redundant navigation to current location: “/about?page=5”.

报错原因：原路由url和新路由url完全一致，会报错，路由避免重复跳转

解决方案1：在/src/router/index.js中添加如下代码：原理是捕获push函数报错，不抛出错误

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => {//throw(err) // 抛出错误,控制台会显示错误信息, 如果不抛出,控制台不会报错return err;})
}

解决方案2：在路由跳转时传入一个参数，参数不同就不会报错

this.$router.push("/search?key=" + this.keyword)

2.vue-ajax请求

在vue项目中不能直接发送ajax请求，会被同源请求策略拦截，需要使用跨域代理器

2.1 代理服务器配置

ajax请求需要跨域的话，需要在vue.config.js中添加代理配置。以下是脚手架5.x版本的配置代码：

onst { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,publicPath: '/',    // 启动页地址outputDir: 'dist', // 打包的目录lintOnSave: true, // 在保存时校验格式productionSourceMap: false, // 生产环境是否生成 SourceMapdevServer: {open: true,host: 'localhost',port: 8080,proxy: {"/myDouyu": {target: "http://open.douyucdn.cn",changeOrigin: true,pathRewrite: {"^/myDouyu": ""}}}}
})

在vue.config.js中的devServer.proxy字段代理服务器
这个文件是服务器的配置对象，所以这个文件的修改需要重启项目生效

2.2 fetch请求方式

在组件中的created钩子函数中使用ajax请求。

<script>export default {name: 'HomeView',created() {fetch("/myDouyu/api/RoomApi/live?page=1").then(res => {res.json().then(res => {console.log(res.data);})})},}
</script>

2.3 axios请求

2.3.1 局部使用axios请求

2.3.1.1 安装axios模块

cnpm i axios --save

2.3.1.2 在组件的script标签中导入axios

import axios from ‘axios’；

2.3.1.3 在当前组件的函数发起ajax请求

            axios.get("/myDouyu/api/RoomApi/live", {params: {page: 1}}).then(res => {console.log(res.data);})

2.3.2 全局使用axios请求

2.3.2.1 安装axios模块

cnpm i axios --save

2.3.2.2 在main.js中导入axios并设置Vue原型

import axios from ‘axios’；
Vue.prototype.$axios = axios；

2.3.2.3 在任意组件中使用axios(添加$用于和组件内字段区分)

            this.$axios.get("/myDouyu/api/RoomApi/live", {params: {page: 1}}).then(res => {console.log(res.data.data);})

3.vue中的props自定义属性

props属性验证写法，props的值是一个对象，对象中的键是属性名，值是属性的限制条件。组件标签自定义属性传值时要根据属性验证的数据类型传值，不然会报错。

export default {name: 'HelloWorld',props: {msg: String}
}