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

router概念

使用路由

安装注册

创建两个组件

App组件

路由配置

创建文件，专门写路由

文件里面的东西

子组件路由

总结

组件来源切换，就是组件的挂载 和 销毁。

路由传参

组价里面传参

跳转到的页面如何接收参数

命名路由

params 参数

用这个参数进行传参

如何接收参数

如果传过来很多的参数，我们首先想到的就是这样进行接收

代码冗余了

如何简化，路由里面用props属性进行配置

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'
	}
}

router-link的replace属性

开启了之后，浏览器就不能后退了

编程式路由导航

不使用 这个标签 <router-link 实现页面的跳转

push

点击一个按钮，调用下面的方法，进行组件的跳转

保留历史记录

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

replace

不保留历史记录
点击一个按钮，调用下面的方法，进行组件的跳转

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

缓冲路由组件

路由身上的特有的生命钩子函数

原来我们经常写的是这一对。
monted 里面写进这个页面就调用里面的东西
另一个是离开这个组件就调用里面的东西

现在学路由身上特有的两个生命钩子

	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)
		},

全局路由守卫（权限）

meta 这个属性里面 就是程序员自己写的自定义的 一些东西

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
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()
		}

history 模式

hash模式

#后面的就不会传给服务器，这个模式就是hash模式，默认的就是这个模式