目录
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模式，默认的就是这个模式
京公网安备 11010502036488号