VUE---学习进阶07

1. 守卫

说明:三个不一定同时使用，按需加载

1.1全局守卫

分为全局前置守卫和全局后置守卫
（1）全局前置守卫钩子函数：
是当前项目中所有的路由规则被访问之前，可以进行一定的验证和拦截操作

router.beforeEach((to,from,next)=>{
	//to      目标路由地址
	//from  来源路由地址
	//next  函数，用来执行或改变默认的路由规则
})

（2）全局后置守卫钩子函数 没有next函数
是当前项目中所有的路由规则被访问之后，没有验证和拦截的功能，一般就做记录

router.beforeEach((to,from)=>{
	//to      目标路由地址
	//from  来源路由地址
})

在router->index.js中增加全局守卫
添加守卫之后只有满足某些条件的时候使用next()才能进入跳转。

实例：
判断用户是否登录，通过缓存（sectionstorage)存储标识，之后再全局守卫中去获取这个标识，通过判断标识来跳转

首先需要把路由定义为router，再将router导出。 位置在路由导出之前写

在router-index.js
// 全局守卫
router.beforeEach((to,from,next)=>{

  //如果去的是登录，直接跳转
    if(to.path=='/login'){
       next()
    }

    //如果去的不是登录，需要判断是否登录
    //在登陆的时候进行了缓存，如果登陆了就可以进行next(),
    var isLogin = sessionStorage.getItem('isLogin')
    if(isLogin){
      next()
    }
})

//login.vue
  login(){
        
        if(this.user =='admin'&&this.pass =='123'){
            // 设置一个表示用来判断是否登录,即如果可以登录，进行缓存
            sessionStorage.setItem('isLogin',1)
            // 编程式导航
            this.$router.push('/index')
        }else{
            alert('账号密码输入错误')
        }
    }

1.2 路由独享守卫

路由独享守卫写在路由映射表配置规则中

在router->index.js的路由中做配置

 //router-index.js
 {
      path:'/movie',
      component:movie,
      // 进入之后  路由的独享守卫
      beforeEnter(to,from,next){
        var type = sessionStorage.getItem('type')
          if(from.path =='/index/home'&& type=='1'){
              next()
          }else{
            next('/index/home')
          }
      },
    },

1.3 组件内部守卫

组件内部守卫是写在组件内部的，beforeRouteEnter和components是同级别的。
组件内部守卫共分为3个：

​1.beforeRouterEnter
在此钩子函数中可以获取不到this

beforeRouterEnter(to,from,next){
if(){
		next()
	}else{
		next('/index/home')
	}
}

2.beforeRouterLeave
在此钩子函数中可以获取到this

beforeRouterLeave(to,from,next){
console.log(this)//this是当前组件实例
}

3.beforeRouterUpdate
在此钩子函数中可以获取到this

//动态路由的参数发生变化时，会自动执行。
beforeRouterUpdate(to,from,next){
console.log(this)//this是当前组件实例
}

组件内部守卫 beforeRouteEnter小实例，只有来源路径为/index/home是，才能进入下一层路由，否则的话回到/index/home：

export default {
//组件内部守卫
  beforeRouteEnter(to, from, next) {
    if(from.path=="/index/home"){
      next()
    }else{
      next('/index/home')
    }

  },
  components: {},
  data() {
    return {
    };
  },
  methods: {},
  mounted() {
  },
};

2. 别名

alias:直接给路由重新赋值新名字
在使用时可以用/f替代/food

{
      path:'/food',
      // 别名
      alias:'/f',
      component:food,
    },

3. name使用

如果页面中的顶部或者底部有公用的样式（模块）可以使用name属性，在app.vue中设置，可以做到全局修改内容

//路由中增加name
{
      path:'/food',
      // 别名
      alias:'/f',
      name:'美食',
      component:food,
    },

//app.vue中使用
<template>
  <div id="app">
    <div>{{$route.name}}</div>
    <router-view/>
  </div>
</template>

4.懒加载

懒加载有两种方式：两种方式没有任何区别，第二种是第一种的简写。

//动态import
// 第一种方式
 const home =()=>Promise.resolve(import('../pages/home'))
 const order =()=>Promise.resolve(import('../pages/order'))
 const mine =()=>Promise.resolve(import('../pages/mine'))
// 第二种
const login =()=>import('../pages/login')

5. mode模式

两者区别：
1.地址栏是否带#
2.如果是history 会把/index/food/detail/id 解析为地址，那么一旦与后台接口重名，那么就会先加载后台数据.

//hash  默认的打包方式 地址栏带#
//history  打包后地址栏不带#

const router = new Router({
  mode: 'history',  
  routes: [
    {
      path: '/',  // 默认进入路由[写在第一个]
      redirect: '/home'   //重定向
    },
    {
      path: '/login',
      name: 'login',
      component: LoginPage
    },
    {
      path: '**',   // 错误路由[写在最后一个]
      redirect: '/home'   //重定向
    }
  ]
});

6. axios

使用axios之前需要先进性下载

npm i axios --save

post请求和get请求传参时使用的对象名不同。
post：data:{}
get:params:{}

//post请求
axios({
            method: 'post',
            url: '/user/12345',
            data: {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }
        });
        get请求：
         axios({
            method: 'get',
            url: '/user/12345',
            params: {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }
        });

axios可以进行分离，代码更加简洁，不用在每个组件中都引用axios
在util中新建request.js文件：

request.js中
import axios from "axios"

export const requestFoodDetail = (foodId)=>{
    return axios({
        url: "api/getFoodDetail",
        method: "get",
        params:{
            foodId:foodId
        }
    })
}

组件中：引入request.js文件
通过res获取数据
mounted(){
    requestFoodDetail(this.$route.params.foodId).then((res)=>{
        // console.log(res.data.detail)
        this.data = res.data.detail
    })
}

7.项目的大致流程

1.初始化项目  vue init webpack 项目名称

2.配置项目目录，即补充未存在的文件

3.清空项目，清空默认的内容，然后写自己的内容

4.路由配置 （一级，二级）  先写组件 在配置路由   

​路由的引入 通过懒加载方式 进行引入

5.守卫  进行守卫的设置

6.请求渲染页面

8. $route $router 区别？

$route ：路由信息 可以拿参数

$router ：路由实例 push replace go 方法