vue-day07 路由守卫，axios

最新推荐文章于 2023-09-16 23:19:03 发布

原创最新推荐文章于 2023-09-16 23:19:03 发布 · 309 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Vue 专栏收录该内容

8 篇文章

订阅专栏

该博客围绕Vue展开，介绍了路由守卫（包括全局、路由独享和组件内部守卫）、路由模式、路由懒加载、name和alias等路由相关知识，还讲解了axios的使用及拦截器使用，同时提到了字体图标使用、项目打包流程和qs使用，强调axios使用要配置跨域。

vue-day07 路由守卫，axios

1.字体图标使用(路由的补充)

1.先下载iconfont
2.导入css以及font  在asset文件夹中
3.在需要位置直接添加类名即可
 <i class="iconfont icon-fanhui" @click="$router.go(-1)">返回</i>

2.路由守卫

1.门岗----验证身份全局守卫出来----可验证可不验证

1.router->index.js中 在导入router之前
// 全局守卫
router.beforeEach((to,from,next)=>{
    //  console.log(to)   //去的路径
    //  console.log(from)//来的路径
    //  console.log(next)//往下执行
    // 如果你去的是登录页面，直接往下走
   if(to.path=='/login'){
     next()
   }

  // 如果去的不是登录页面  需要判断是否登录过，如果登录了直接next 否则不让走
  var isLogin  = sessionStorage.getItem('isLogin')
  if(isLogin){
    next()
  }
})

2.前台----验证身份路由独享守卫出来----可验证可不验证

1.每个路由的下面  /food 下面直接写方法   beforeEnter(to,from,next){}
{
      path:'/food',
      component:food,
      beforeEnter(to,from,next){
        console.log(to)
        console.log(from)
        if(to.path=='/food'&&from.path=='/index/home'){
            next()
        }
      }
    }

3.班主任–验证身份组件内部守卫出来----验证身份

1.位置在export default{
	beforeRouteEnter(to,from,next){
		
	}
}
在food.vue中
// 组件内部守卫
beforeRouteEnter (to, from, next) {
    // console.log(to)
    // console.log(from)
    if(from.path=='/index/home'){
       next() 
    }
},
// 组件离开的时候
beforeRouteLeave (to, from, next) {
    if(to.path=='/foodDetail'||to.path.includes('/foodDetail')){
        next()
    }
},

注意：各个路由可以单独使用

3.路由模式

1.hash 默认的带#    2.history 不带#号  区别：项目打包后，如果后台接口中的接口名称与你的路由的path有一样的，则会优先走后台的接口

项目打包流程:

1.在当前文件夹中 npm run build

2.打包生成的dist文件夹中的内容放到后台文件夹中的www目录中即可

4.路由懒加载

在router-》index.js
// 懒加载
const login = ()=>Promise.resolve(import('../pages/login'))
const index = ()=>Promise.resolve(import('../pages/index'))
const food = ()=>Promise.resolve(import('../pages/food'))

// 懒加载第二种
const home =()=>import('../pages/home')
const order =()=>import('../pages/order')
const mine =()=>import('../pages/mine')

5.name

在router->index.js中
{
      path:'/login',
      name:'登录',
      component:login
    }

在app.vue中
 <div>{{$route.name}}</div>

6.alias（别名）

router->index.js
{
path:'mine',
name:'我的',	
component:mine,
alias:'m'
},
此时页面访问的话直接访问/m即可
<router-link to="/index/home" active-class="select">首页1</router-link>
<router-link to="/index/o" active-class="select">订单2</router-link>
<router-link to="/index/m" active-class="select">我的3</router-link>

7.axios使用

一定记得配置跨域：

在config文件夹-》index.js
 proxyTable: {
      '/api':{
        // 后台接口地址 198.45.3.4
        target:'http://localhost:3000',
        changeOrigin:true,
        pathRewrite:{
          '^/api':'http://localhost:3000'
        }
      }
    },

1.安装 cnpm i axios --save
2.哪里用哪里引入 import axios from 'axios'
3. axios({
        url:'/api/getFoodDetail',
        method:'get',
        params:{
            foodId:id
        }
    }).then(res=>{
        console.log(res)
        this.detail = res.data.detail
    })
   4. axios({
        url: "/api/login",
        method: "post",
        data: {
          name: this.username,
          pass: this.password,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.isok) {
          // 角色权限的判断
          sessionStorage.setItem("type", this.type);

          // 登录的判断
          sessionStorage.setItem("isLogin", 1);
          this.$router.push("/index");
        }
      });

8.axios拦截器使用

1.位置:util->request.js
// 响应拦截  如果想要数据必须要通过return 
axios.interceptors.response.use(res=>{
    console.log(res)
    // 可以把公共的功能模块放到这个位置
    if(!res.data.isok){
        alert(res.data.info)
    }
    return res
})

// 请求拦截
axios.interceptors.request.use(config=>{
    console.log(config)
    config.a=10
    config.token=123445543324
    return config
})

9.qs使用

qs:解决后台获取不到数据的问题
如果没有文件的请用：qs.stringify()
如果有数据：new formData() 
1.安装cnpm i qs --save
2.在请求时进行数据的转换
在request.js中
export const reqLogin=(params)=>{
    // {name:'abc',pass:'123',file:'...',img:'http://....'}
    // 上传文件的操作
    // var form  = new FormData()
    // form.append('name','abc'),
    // form.append('pass','123'),
    // for(var i in params){
    //     form.append(i,params[i])
    // }
    return  axios({
        url: "/api/login",
        method: "post",
        data:qs.stringify(params),
        // data:form,
        // {name:adb,pass:123}
      })
}