路由守卫gogo

beforeEach 我们以前用过,这里就不写了

beforeEnter 可以针对单个路由进行守卫

组件内守卫:

这里我们测试下beforeRouteEnter 组件内守卫:

Index.vue

<template>
  <div>
    <p>index pager</p>
    <ul>
      <li v-for="(course,index) in courses" :key="index">{{course}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    setData(courses) {
      this.courses = courses;
    },
  },
  beforeRouteEnter(to, from, next) {
    let coures = [];
    console.log("我即将进入路由的导航链接。。。");
    setTimeout(() => {
      coures = ["soft", "vue", "css"];
      next((vm) => {
        //将课程列表设置进去!
        vm.setData(coures);
      });
    }, 2000);
  },
  data() {
    return {
      //这里数组,我不想在组件中获取, created ,mounted 方法中获取,我想在路由的级别获取!
      // 这个时候,就用到了路由钩子 beforeRouteEnter beforeRouteUpdate 方法
      courses: [],
    };
  },
};
</script>

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

效果没有任何问题,这

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页