vuex全家桶系列10-组件内部的守卫应用

1.组件内的守卫：

🍊可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

🤖需求以及主要的代码实现：

编写一个Eaditor组件，这个组件里面有个textarea，然后点击保存后会将textarea中的内容保存到list列表中去,下面来看下具体的实现：

• 导航离开该组件的对应路由时调⽤beforeRouteLeave
• 可以访问组件实例 this

//src/views/Eaditor.vue组件
<template>
  <div>
    <textarea v-model="content" cols="30" rows="10"></textarea>
    <button @click="save">保存</button>
    <div v-for="(item,index) in list" :key="index">
      <p>{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      list: [],
    };
  },
  methods: {
    //😁保存方法
    save() {
      this.list.push({
        title: this.content,
      });
      //🤪清空textarea中的内容
      this.content = '';
    },
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调⽤
    // 可以访问组件实例 `this`
    if (this.content) {
      alert('请你确保内容保存后再离开~(*￣︶￣)');
      next(false); //next(false)表示返回当前页面
    } else {
      //如果里面没有内容就正常放行了
      next();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>