vue 学习经验总结（路由守卫之没登录时手动输入url去个人中心重定向至登录页）

1.进入个人中心时，在router里面配置

        path: '/mine',
        component: mine,
        meta:{requireAuth:true},
        //进入个人中心之前，需要判断是否注册登录
        beforeEnter(to,from,next){
          if(localStorage.getItem("token")){
            next()
          }else{
            next({
              path: "login",
              query: {redirect: to.meta.redirect} 
            });
          }
        },

2.配置不存在的页面，当用户手动输入的url不存在时

新建一个Notfount.vue页面

<template>
    <div class="notfound">
        <div class="box">
            <img src="../assets/blank/notfound.png" alt="">
            <p class="news">抱歉，你访问的页面不存在或仍在开发中</p>
            <button class="homebtn" @click="gohome">返回首页</button>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        gohome(){
            this.$router.push({path:'/home'})
        }
    }
}
</script>

<style lang="stylus" scoped>
.box{
    margin:0 auto;
    height:635px;
    width:1205px;
    text-align center;
    img{
        display:block;
        margin:50px auto;
    }
    .news{
        font-size:18px;
        color:#666;
        margin-bottom:50px;
    }
    .homebtn{
        width: 120px;
        margin:0 auto;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: #4182fa;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        border-radius: 3px;
        border:0;
    }
}
</style>

在router里面配置

//路由守卫
import  NotFound from  "@/components/NotFound.vue";




 {
        path:"*",
        component:NotFound
      }

3.退出登录后，返回至首页

在router里面配置：

// 导航守卫
  // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
  beforeEach(to, from, next) {
    if(store.state.isLogin==1){
      next("/")
    }else{
      next()
    }
  },