您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
路由权限(路由守卫)
发布时间：2020-03-02 00:17:18编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
var blog={
data:function(){
return{}
},
template:`<div>blog组件</div>`,
};
var login={
data:function(){
return{
name:"",
pwd:""
}
},
template:`<div>
<input type="text" v-model ='name'/>
<input type="text" v-model = 'pwd'/>
<input type="button" value ='登录' @click = 'login'/>
</div>`,
methods:{
login(){
//假装登录成功然后就进入需要auth的blog路由
localStorage.setItem('user', {name:this.name,pwd:this.pwd});
// 编程式导航
this.$router.push({name:'blog'});
}
}
};
var home={
data:function(){
return{}
},
template:` <div>
<router-link :to ="{name:'song',params:{id:'andorid'}}" >song-android</router-link>
<router-link :to ="{name:'song',params:{id:'frontend'}}">song-frontend</router-link>
<router-view></router-view>
</div>`
};
var router=new VueRouter({
routes:[
{
path:"/home",
name:"home",
component:home
},
{
path:"/login",
name:"login",
component:login
},
{
path:"/blog",
name:"blog",
component:blog,
//路由守卫，auth为true即开启auth认证
meta:{auth:true}
}
]
});
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
//遍历路由，如果那个路由需要auth则跳转到登录路由
if (to.meta.auth) { //用户点击了博客链接 该用户未登录 需要登录判断 准备跳转登录页面
if(localStorage.getItem('user')){
// alert(1);
// 不为空 放行
next();
}else{
// alert(2);
// 用户需要登录
next({
path:'/login'
});
}
}else{
// 直接放行
next();//如果不调用next 就会卡住
}
});
var App = {
template:`<div class='app'>
<router-link :to ="{name:'home'}">首页</router-link>
<router-link :to ="{name:'blog'}">blog</router-link>
<router-link to = '/login'>登录</router-link>
<a href="javascript:void(0);" @click = 'clear'>退出</a>
<router-view></router-view>
</div>`,
methods:{
clear(){
//退出登录
localStorage.removeItem('user');
this.$router.push('/login');
}
}
};
//挂载路由对象
new Vue({
el: '#app',
router:router,
template: `<App />`,
components:{App}
});
</script>
</body>
</html>
关键字词：vue,路由权限,路由守卫
上一篇：动态路由
下一篇：vue的keep-alive