VUE2.0 学习（二十九）路由router，一篇文章讲清楚vue关于路由的所有东西

children:[
{
name:'xiangqing',
path:'detail',
component:Detail,

//props的第一种写法，值为对象，该对象中的所有key-value都
会以props的形式传给Detail组件。
// props:{a:1,b:'hello'}

//props的第二种写法，值为布尔值，若布尔值为真，
就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
// props:true

//props的第三种写法，值为函数
props($route){
	return {
		id:$route.query.id,
		title:$route.query.title,
		a:1,
		b:'hello'
	}
}

pushShow(m){
				this.$router.push({
					name:'xiangqing', 跳转到这个名字的路由
					query:{   传的参数
						id:m.id,
						title:m.title
					}
				})
			},

	replaceShow(m){
				this.$router.replace({
					name:'xiangqing', 跳转到这个名字的路由
					query:{传的参数
						id:m.id,
						title:m.title
					}
				})
			}
		},

	activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{

// 参数 from  to 是路由的全部信息
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='jing'){
			next()//放行
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()  //放行
	}
})


//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用

改变浏览器页签的title
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '系统'
})

//通过路由规则，进入该组件时被调用
		beforeRouteEnter (to, from, next) {
			console.log('About--beforeRouteEnter',to,from)
			if(to.meta.isAuth){ //判断是否需要鉴权
				if(localStorage.getItem('school')==='jing'){
					next()
				}else{
					alert('学校名不对，无权限查看！')
				}
			}else{
				next()
			}
		},

		//通过路由规则，离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			console.log('About--beforeRouteLeave',to,from)
			next()
		}