ref属性

【给元素或子组件注册引用信息】

【应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)】

例子：

首先用ref=“XXX”打标识；

具体操作如下：

<el-form ref="loginFormRef" :model="loginFrom" :rules="loginFormRules" label-width="0px" class="login_form">

设置重置按钮，使点击时重置表单，添加@click点击事件，调用resetLoginForm方法，并使用this.$refs.XXX的方式调用重置方法；

具体调用方式：

methods: {
        resetLoginForm(){
            this.$refs.loginFormRef.resetFields()
        }
    }

【易错点：方法名写错，出现undefind等提示错误】

SessionStorage与LocalStorage

1. SessionStorage和LocalStorage都在本地进行数据存储；
2. SessionStorage只有在同一浏览器的同一窗口下才能够共享；
3. LocalStorage和SessionStorage都不能被爬虫爬取；

SessionStorage常用API

// 保存数据到 sessionStorage，以token为例
window.sessionStorage.setItem('token', 'res.data.token');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)

编程式路由

不需要<router-link>实现路由跳转

//$router的API
this.$router.push('/home')

this.$router.replace()

this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() 

路由守卫

以有无token为例

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

axios拦截器

1.请求拦截器

【在请求前使用】

在入口文件main.js中：

// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
axios.interceptors.request.use(config => {
  console.log(config)
  // API文档中提到：需要授权的 API ，必须在请求头中使用 `Authorization`
  //在向服务器发送请求时，会先判断Authorization是否符合要求
  // 如果不符合要求，或者不存在（即Authorization的value为null），则驳回此次请求 
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

slot插槽

【使得父组件可以向子组件的指定位置插入html结构，也是一种组件间通信的方式】

【回忆：组件通信的8种方式】

props属性

element-ui组件库中Form组件的prop属性

在做项目的过程中有使用到element-ui组件库，使用表单Form组件时，会用到prop属性；

【首先通过rules属性传入验证规则，再使用prop属性设置需要校验的字段名】

以项目中User.vue中的部分代码为例：

<!-- 内容主体区域 -->
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
    <el-form-item label="用户名" prop="username">
        <el-input v-model="addFormRules.username "></el-input>
    </el-form-item>
    </el-form>