web前端全栈0基础到精通（祺）vue 07

2路由导航守卫

守卫不添加就没有，如果添加必须根据条件是否放行

进入五方桥只有南大门，你会遇见门口的保安大爷！！！（全局守卫）保安让你过你就可以next()，如果它不让你过你就被拦截
进入一号楼，门口就有门禁，如果有权限就可以next() 否则就进不来 。这种拦截守卫叫路由独享守卫
进入不同的班级，会遇见内部守卫（组件内部守卫） 进入组件之前的守卫，组件内部更新守卫，离开组件也会有一道守卫，组件离开守卫

• 全局导航守卫

进入之前（前置导航钩子函数）
beforeEach((to,from,next)=>{

})

后置导航钩子函数
afterEach((to,from)=>{

})

• 路由独享守卫

beforeEnter(to,from,next){
	
}

• 组件内部守卫

beforeRouteEnter(to,from,next){
	//进入组件之前的守卫
}

beforeRouteUpdate(to,from,next){
	//进入组件更新守卫
}

beforeRouteLeave(to,from,next){
	//离开组件之前的守卫
}

• 登录拦截

  • 登录页

  <template>
    <div>
      <h1>欢迎光临</h1>
      <div>用户名：<input type="text" v-model="userInfo.name" /></div>
      <div>密码：<input type="text" v-model="userInfo.pass" /></div>
      <div>
        <button @click="login">登录</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userInfo: {
          name: "",
          pass: "",
        },
      };
    },
    methods: {
      //封装一个登录事件
      login() {
        //空判断
        if (this.userInfo.name == "" || this.userInfo.pass == "") {
          alert("用户名或者密码不能为空");
        } else if (
          this.userInfo.name == "admin" &&
          this.userInfo.pass == "123456"
        ) {
          //登录成功之后存储登录状态值
          sessionStorage.setItem('isLogin',true)
          //登录成功跳转到首页
          this.$router.push("/home");
        } else {
          alert("用户名或者密码错误");
        }
      },
    },
  };
  </script>
  
  <style scoped></style>
  
  

  • 全局守卫实现登录拦截

  router=>index.js

  //登录拦截（一般用于后台管理项目）
  /*  思路逻辑：
  登录拦截指的是，没登录就不让进！！！永远都在登录页面
  一、如果去的就是登录页 就next()
  二、如果你登录了 我就next()
  三、如果以上都不符合 我就让你强制跳转到登录页！！！
  */
  //router 是实例化的路由配置对象
  router.beforeEach((to,from,next)=>{
    // 一、如果去的就是登录页 就next()
    if(to.path=='/login'){
      next()
      //结束逻辑
      return
    }
    //二、如果你登录了 我就next()
  if(sessionStorage.getItem('isLogin')){
      next()
      return
    }
    //三、如果以上都不符合 我就让你强制跳转到登录页！！！
    next('/login')
  })
  

2.13路由模式

路由模式指的是路由切换跳转的方式是哪一种
你在创建脚手架项目的时候，会给你选择，问你是否创建history模式

哈希 hash
history 模式

通过mode属性，去设置它的模式

• hash模式和history两种模式区别

一个带#一个不带#号！！！
这个回答也太low

我们要从上线部署之后产生的问题去回答！！！
哈希模式，前进后退刷新都不会出现任何问题。因为hash就不属于完整地址。但是history模式不一样。前进后退没问题，但是刷新，它要去匹配后端的完整地址，所以这种模式虽然好看，但是要后端和我们一起配合使用。
在工作过程中，hiatory模式用的会更多一些

如果后端要配置
#Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>


#nginx
location / {
  try_files $uri $uri/ /index.html;
}

2.14路由懒加载

项目做到最后都是优化的一个过程
单页应用，首次加载把所有的内容都获取出来，导致页面卡顿。
我们可以从各个方面进行优化，其中很大一部分优化来自于路由
第一次加载的过程中，把所有路由文件都加载出来了
我们可以把所有的路由切割成不同的代码片段，你需要谁就调用谁

两种方式：
① const 变量= ()=>import('组件地址')
{
	component:变量
}

②
{
	component:()=>import('组件地址')
}

2.15 零碎知识点

• name

可以直接获取名字

• meta

可以实现自定义配置

• alias

别名，通过别名也可以访问当前组件
一个或者多个
alias:'/别名'
alias:['/a','/b'....]

2.16 Devtools (vue专门的调试工具)

• 官网

https://github.com/vuejs/vue-devtools

• 安装步骤

通过下载，解压缩到本地目录
通过yarn install(i)  去安装相关依赖
通过 yarn run build 执行一下
安装过程中总报错，还挺卡，你可以直接用我安装好的插件
vue-devtools-dev.zip
放到一个不常用的目录结构下

谷歌插件调用
地址：
vue-devtools-dev\packages\shell-chrome

2.17 yarn(国内的包管理)

https://yarn.bootcss.com/

• 安装

npm install(i) -g yarn

• 语法

https://yarn.bootcss.com/docs/usage/

---

三、数据交互（axios）

3.1概念

axios : 读音  阿克西奥斯河

它并不是vue独有的插件。
axios是一个HTTP的库，基于promise创建的
一般vue中或者react中进行数据交互，我们可以调用这个库

易用、简洁且高效的http库(基于promise创建的)

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

3.2官网地址

中文文档： http://www.axios-js.com/
npm : https://www.npmjs.com/package/axios

3.3特点

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF(跨站请求伪造)

3.4安装

npm install axios
+ axios@0.21.1

3.5 直接调用方法（配置对象）api方法

axios({
	url:'//要链接的地址',
	method:'get/post',//交互方式 如果是get可以省略
	//如果你是get请求
	params:{
	  //要传入的参数
	}
	//如果是post请求
	data:{
		//要传入的参数
	}
})
.then((res)=>{
	//res 成功之后的响应
})
.catch((err)=>{
	//err 错误响应
	//http状态码 非200的时候进入
})

3.6 get()方法

axios.get('url地址',{
	params:{
		//要传入的参数
	}
})
.then((res)=>{
	//res 成功之后的响应
})
.catch((err)=>{
	//err 错误响应
	//http状态码 非200的时候进入
})

3.7post()方法

axios.post('url地址',{
	//要传入的参数
})
.then((res)=>{
	//res 成功之后的响应
})
.catch((err)=>{
	//err 错误响应
	//http状态码 非200的时候进入
})

3.8 async await方法

强制转同，按照我的顺序调取接口

async function getUser() {
  try {
  //成功时候的执行
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
  //错误拦截
    console.error(error);
  }
}

3.9 局部调用axios

<template>
  <div>
    <h1>axios案例</h1>
  </div>
</template>

<script>
//引入核心库
import axios from "axios";
export default {
  data() {
    return {};
  },
  mounted() {
    //页面一加载调用接口
    // axios({
    //     url:'http://jsonplaceholder.typicode.com/posts',
    // })
    // .then(res=>{
    //     console.log(res,'成功之后的响应');
    // })
    // .catch(err=>{
    //     console.log(err,'错误捕获');
    // })
    //axios.get()
    axios
      .get("http://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        console.log(res, "成功之后的响应");
      })
      .catch((err) => {
        console.log(err, "错误捕获");
      });
  },
};
</script>

<style scoped></style>

3.10 全局调用axios

main.js

//引入axios核心库
import axios from 'axios'
// 把当前核心库挂载到Vue原型上
Vue.prototype.$axios = axios

3.11 如何最新版的脚手架中解决跨域问题

• 上线之后跨域问题谁解决？？？

后端去解决或者，服务器解决

• 创建自定义配置项

创建文件====vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

• 官方配置项文档

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

• 开发环境下解决跨域问题
  vue.config.js

//这就是vue的配置项
module.exports ={
    devServer:{
        //解决跨域问题配置
        //配置代理
        proxy:'你要解决跨域的地址'
    }
}

---