首先我们需要创建三个视图,分别是:首页(Home),博客(blog),登录(login)
首页:
const home={
template:" <div><p>首页</p><div>"
}
博客
const blog={
template:"<div><p>博客</p></div>"
}
登录
const login={
template:`
<div>
<p>账号:<input type='text' v-model='name'/></p>
<p>密码:<input type='text' v-model='password'/></p>
<p><input type='button' value='登录' @click='loginName()'/></p>
</div>
`,
data:()=>({
name:'',
password:''
});
methods:{
//将账号,密码存储在本地
loginName(){
localStorage.setItem('name',this.name);
localStorage.setItem('password',this.password);
this.$router.push({
name:blog
});
}
}
};
接下来是理由的设置
const routes = [
{ path: '/home', component: home },
{
path: '/blog',
component: blog,
//登录权限
meta:{auth:true},
name:'blog'
},
{path:'/login',component:login},
{path:'/',redirect:'/home'}
];
//路由注册
var router=new VueRouter({
routes
})
路由监控
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
//to跳转的页面
//from跳转前的页面
//跳转页面
if(to.meta.auth){
let win=window.localStorage;
//检查输入的内容是不是符合要求
if(win.getItem("name")=="admins"&&win.getItem('password')=="admins")
{
//符合继续进行
next();
}else{
//不符合跳转登录界面
next({
path:'/login'
})
}
}else{
next();
}
});