Vue实现单页面路由拦截

单页面路由拦截

//需要你写在需要拦截的页面 例如你在首页进入到我的页面时，写在我的页面代码块里面
<template>
  <div>
    欢迎：xxx(通this.$stort.state.vuex存储用户的变量)
  </div>
</template>

<script>
export default {
     
     
  name: "",
  beforeRouteEnter(to, from, next) {
     
     
    next((vm) => {
     
     
  //判断vux里面有没有用户名存的值 前提是您要存进去再判断
      if (vm.$store.state.username == "") {
     
     
        alert("请先登录");
        vm.$router.push("/");//拦截成功后需要跳转的页面
      }
    });
  },
  data() {
     
     
    return {
     
     };
  },
  mounted() {
     
     },
  methods: {
     
     },
};
</script>

<style scoped></style>