简单的导航守卫例子

售票处  指登录
动物园  指需要登录才能进入的页面
公园      指不需要登录就能进入的页面

如果没有在售票买票，可以进入公园，但是如果要进入动物园，将直接跳转到售票处

5个路由组件 （Tiger是Zoo的子路由）

Ticket中点击btn，往localStorage中添加一个属性，用来判断是否买票

const Index={
	template:`
		

			
广场
			动物园
			公园
			售票处
		
				
	`							
}
const Zoo={
	template:`
		
动物园
			

			
		
	`
}
const Ticket = {
    template: `
      
售票处
        买票  
      
    `,
    methods: {
      buy () {
        localStorage.setItem('ticket', 1)
      }
    }				
  }
const Park={
	template:`
		
公园
	`
}
const Tiger = {
    template: `
      
老虎
    `
  }

创建路由数组、路由对象

在需要‘门票’验证的路由对象的meta属性上添加requireAuth:true,如

{
    path:'/zoo',
	component:Zoo,
	meta:{
		requireAuth:true
    }
}

不需要验证的不需要加meta,哪个路由需要验证就加哪个路由上

const routes=[
{
	path:'/',
    component:Index
},
{
	path:'/zoo',
	component:Zoo,
	meta:{
		requireAuth:true
	},
	children:[
		{
			path:'tiger',
			component:Tiger,
			children:[
				{
					path:'letterTiger'
				}
			]
		}
	]
},
{
	path:'/ticket',
	component:Ticket
},
{
	path:'/park',
	component:Park
}
]
const router=new VueRouter({
	routes
})

Zoo下有Tiger子路由，也需要进行验证才能进入，直接给Tiger添加meta也可以实现验证，但是，如果Zoo中还有狮子园、大象园、熊猫园......每个子路由都要加meta就太麻烦了。

router提供了matched方法，matched中包含了自己本身路由对象及父路由和祖先路由的路由对象。

结合es5中数组的some方法：只要有一个为真，即为真，所以只要在最顶上的路由上加meta，便可同时验证所有子路由

router.beforeEach((to,from,next)=>{
	const ticket=localStorage.getItem("ticket");
	if(to.matched.some(route=>route.meta.requireAuth)){
		if(ticket){    //有票，跳转
			next()
		}else{
			next('/ticket')    //无票，跳转到售票厅
		}
	}else{    //没有加meta的直接跳转，不需要验证
		next();
	}
})