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()
}
},