一、给vue-Router的对象(实例),增加如下代码:
router.beforeEach((to, from, next) => {
console.log(to.fullPath);
if(to.fullPath!='/login'){//如果不是登录组件
if(!localStorage.getItem("username")){//如果没有登录,就先进入login组件进行登录
next('/login');
}else{//如果登录了,那就继续
next();
}
}else{//如果是登录组件,那就继续。
next();
}
})
以上代码表示,进入任何路由前,都需要先判断是否登录过,如果没有登录过,那就进入登录组件(/login)进行登录。如果登录过,那就一切正常,这就是路由守卫的意思。
二、完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<router-link to='/addGoods'>添加商品</router-link>
<router-link to='/goodslist'>商品列表</router-link>
<hr/>
<router-view/>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 登录组件
let login={
template:"<h1>亲,先登录噢</h1>"
}
// import addGoods from './addGoods';//引入组件:addGoods
// 定义组件(不引入了,直接定义)
let addGoods={
data:function(){
return {}
},
template:"<h1>添加商品</h1>"
}
// import goodslist from './goodslist';//引入组件:goodslist
//定义组件(不引入了,直接定义)
let goodslist={
data:function(){
return {}
},
template:"<h1>商品列表</h1>"
}
//路由配置:是个json数组,不同的路径对应不同的组件
const routeObjs = [
{
path: '/addGoods', //请求的路径:根目录下的addGoods
component: addGoods //组件名
},
{
path: '/goodslist', //请求的路径:根目录下的goodslist
component: goodslist //组件名
},
{
path:'/login',
component:login
}
]
const router = new VueRouter({
routes:routeObjs //routeObjs就是上面的路由配置
})
router.beforeEach((to, from, next) => {
console.log(to.fullPath);
if(to.fullPath!='/login'){//如果不是登录组件
if(!localStorage.getItem("username")){//如果没有登录,就先进入login组件进行登录
next('/login');
}else{//如果登录了,那就继续
next();
}
}else{//如果是登录组件,那就继续。
next();
}
})
let vum = new Vue({
el:"#app",
router:router,//把路由对象传入到Vue对象里
components:{
login,addGoods,goodslist
}
})
</script>