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>