多級路由
????????????????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) {}
)
