Vue笔记第六天(设置cook、导航守卫、watch和filter的补充)

本文深入讲解前端开发中的高级技巧,包括使用axios进行跨域请求并携带cookie,设置全局及局部导航守卫实现页面访问控制,利用watch进行深度侦听及过滤器的高级应用,为前端开发者提供实用的技术指南。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第六天

1.axios发post请求
axios .post( 网址,{传递给服务器的参数 }) .then(backData=>{})

2.设置让axios发请求时默认带cookie
原因:axios 跨域默认不携带cookie
解决办法:axios.defaults.withCredentials = true;

3.导航守卫
①.全局导航守卫–作用:可以在跳转到另一个路由之前,帮你做一些处理(比如说判断能不能访问接下来要访问的页面)
a. 语法:router.beforeEach((to, from, next) => { // ... // to是去哪 from是从哪来 next()放行 })
b.特点:进入路由的任何页面都会被调用,它叫全局导航。在进入组件之前就调用了
c.记得要么跳转到另外一个页面去,要调用next()放行,否则就没任何反应了

②.局部导航守卫:在哪个路由规则的组件里写beforeEnter,那么就代表只有进入到这个页面才会被拦截,用法跟全局是一样的
{ path: '/user', component: user,beforeEnter:(to, from, next) => { }

4.watch的补充
①侦听新值和旧值

  watch: {
                msg(newValue, oldValue) {                                                                                                       
                    console.log('侦听msg');
                    console.log(newValue,oldValue);
                    // 有参数的可以比较两次数据的异同
                },
             },

②深度侦听
原因:

  • 默认情况下,侦听一个对象,但我们改变的是这个对象里的属性值,不会触发侦听
  • 要想让对象里的属性只要改变都触发,就要用深度侦听
  • 用法:
    • 在watch里些对象名,直接给的值也是对象
    • 对象里有2个,一个叫 handler(函数) 一个叫 deep:true
    food: {
          handler(newVal, oldVal) {
            console.log(newVal)
            console.log(oldVal)
          },
          // 开启深度侦听
          deep: true
        }    
        
    

注意事项:
开启深度侦听之后,2个参数给的值都相同!!!
原因:因为侦听的是对象,而我们改的只是属性值,那么侦听对象,对象的两次值没变(就是它的地址没变),仅仅变得只是属性值,所以才会新值和旧值一样
如果非要侦听到不同的值,可以改成普通侦听,具体侦听对象里的哪个属性,这样的话就能比较异同了

5.过滤器的补充
过滤器的串联

a. 依次写一大堆的过滤器(不常用)

b. <h2>{{ info | addFont | addBack | addBack2 }}</h2>

filters: {
      addFont(value) {
        return '唱,' + value
      },
      addBack(value) {
        return value + ',rap'
      },
      addBack2(value) {
        return value + ',跳'
      }
    }

过滤器传参

a. 调用过滤器时,和调用方法类似,传入参数即可

<h2>过滤器的传参</h2>
<p>{{ food | cookFood('小炒')}}</p>
<p>{{ food | cookFood('清蒸')}}</p>
<p>{{ food | cookFoodPlus('清蒸','红烧')}}</p>

b. 定义过滤器时

// 处理food的过滤器
  cookFood(foodName, do1) {
    return foodName + do1
  },
  // 高级烹饪
  cookFoodPlus(foodName, do1, do2) {
    return foodName + do1 + do2
  }

注意: 自己传入的参数,是从第二个开始,第一个参数固定是,处理的数据

全局过滤器,局部过滤器

a. 定义一次

  • 所有地方都可以用
  • . 语法如下:参数1:过滤器名字,参数2:回调函数
    Vue.filter(过滤器名字, (value)=>{
       return value+'唱,跳,rap'
     })
  • . 局部过滤器
    1. 定义一次,只在当前这个Vue实例中可以使用(组件)
    2. 实例内部的filters 局部过滤器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值