路由的高级用法

多级路由

1.新建一个Mian组件

<template><div> <h1>我是Msg的子组件</h1></div>
</template><script>
export default {name: "Mian",
}
</script><style>
</style>

2.在router中msg小新建一个路由


import About from '../pages/About'  
import Message from '../pages/Message' 
import Mian from '../pages/Mian' 
import VueRouter from 'vue-router'//创建并暴露一个路由器
const VR =  new VueRouter({// mode:'history',node:"hash",routes:[{name:"guanyu",path:'/about',component:About,meta:{tittle:"生于小满"}},{name:"xinxi",path:'/msg',component:Message,meta:{tittle:"小满为安"},children:[{name:"zi",path:'mian',component:Mian,meta:{tittle:"演技"}, }]}]
})export default VR

3.在Message组件中调用

<template><div class="d"> <div><h1>我是Msg的内容</h1><router-link to="/msg/mian">跳转mian</router-link> </div><!-- 展示区 --><router-view></router-view></div>
</template><script>
export default {name: "Message",
}
</script><style scoped>.d{display: flex;flex-direction: column;justify-content: space-around;}</style>

4.重启项目

路由传参

1.在router-link中进行传参

         <!-- 字符串 query--><!-- <router-link to="/msg/mian?id=123">跳转mian</router-link>  --><!-- 通过query进行对象传参 --><router-link:to="{path:'/msg/mian',query:{id:123}}" >跳转mian</router-link> <!-- 通过params进行对象传参 --><router-link:to="{name:'zi', params:{id:321}}" >跳转mian</router-link>

2.使用route对象接收

        queryid:{{$route.query.id}} <br>paramsid:  {{$route.params.id}}

props配置

1.配置mian路由的props

            children: [{name: "zi",path: 'mian',component: Mian,meta: { tittle: "演技" },// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。// props: { a: 1, b: 'hello' },//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。// props:true// props的第三种写法，值为函数props($route) {return {id: $route.query.id,a: 1,b: 'hello'}},}]

2.在Mian组件中调用

 props:['id','a','b']

       id:{{id}}  <br>a:{{a}} <br>b:{{b}}

router-link 的replace属性

浏览的历史记录有两种写入方式：分别为push(你点击进入到下一个路由的时候可以返回到上一个路由)和replace(你点击进入到下一个路由的时候，浏览器左上角不会有返回上一步)，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push,通过以下方式开启replace模式
<router-link replace to='/about'>News</router-link>
编程式路由导航

通过$router的两个方法来实现页面的跳转,push是默认带缓存，replace是覆盖缓存
   <p @click="pbt">跳转mian router</p>
  methods:{pbt(){this.$router.push(  {name:'zi',query:{id:1,}   })
}
}
        this.$router.replace( ) 跳转页面，replace，会销毁之前的操作，不会保留

        this.$router.go() 正数向前负数后退

        this.$router.back() 后退

        this.$router.afterEach() 向前

缓存式路由

在销毁之前,保存之前用户输入的数据
    <keep-alive include="['zi']"><router-view></router-view></keep-alive>
路由独有的钩子函数
activated() {console.log("被激活了")this.timer = setTimeout(()=>{this.opacity -= 0.01if (this.opacity <= 0) this.opacity = 1},16)
},
deactivated() {consoole.log("快失活了")clearInterval(this.timer)
},
用于关闭定时器但是需要保留数据的时候

路由守卫

前置路由守卫，用于验证用户身份或者做别的校验，在router中定义
    VR.beforeEach((from,to,next)=>{console.log("前置路由守卫")if(to.meta.isAuth){if(localStorage.getItem("school" === 'xb')){next()}else{alert("您无权查看该信息")}}else{next()}
})
后置路由守卫 ,可用于修改html的tittle
    VR.afterEach((from,to)=>{console.log('后置路由守卫')document.title = to.meta.tittle || '小白系统'
})
独享路由守卫，只有在某个组件里可以使用
beforeEnter:(from,to,next)=>{}
组件内路由

通过路由规则,进入该组件时调用
  beforeRouteEnter(to, from, next){}
通过路由规则，离开该组件时候调用
    beforeRouteLeave (to, from, next) {}