Vue登录（meta的使用及权限控制）

首先我们需要创建三个视图，分别是：首页（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();
              }
          });