vue 用 vue-cli 創(chuàng)建項(xiàng)目 會主動生成route-index.js
1，vue-Route 的使用
main.js
import? router from './router'? 引入router配置
new Vue({
? ? el:'#app',
? ? router,? ? ? ?//注冊router 到 Vue 實(shí)例中枯跑，我們可以看到APP是根組件愧哟，所以App 組件內(nèi)部會有路由功能
? ? components:{App},
? ? ?template:'<App/>'
})
src-router-index.js里注冊路由
import Vue from 'vue'
import Router? from 'vue-router' //引入路由組件
import?home?from?'./views/index'
Vue.use(Router)
export?default?new?Router({
??routes:?[
? ? ? {
? ? ? ? path:?'/',
? ? ? ? ?component:?home //第一種注冊方式
? ? ? ? ?},{
? ? ? ? ? ? path:'/head',
? ? ? ? ? ? name:'head',
? ? ? ? ? ? component:()=>import('@/view/city/city') //第二種注冊方式
? ? ? ? ? }
??]
})
2须床，路由的調(diào)轉(zhuǎn)
this.$router.push('/')
this.$route.push({name:'head'})
路由的get 方式
this.$router.push({name:'routername',query:{id:xxx}})
? ? this.$router.push({path:'/'},params:{XXX:XXX})
路由的post方式傳值
this.$router.push({name:'routername',params:{id:xxx}})
路由的后退
this.$router.go(-1)
this.$router.back()
路由的前進(jìn)
this.$router.forward()
替換當(dāng)前路由翘单，在路由歷史中不會再出現(xiàn)該路由
this.$router.replace(location)
當(dāng)前路由的對象屬性(一定要記得是小寫的$route场晶，并且沒有r)
this.$route.path ? 當(dāng)前路由路徑 path
this.$route.name ?當(dāng)前路由名稱
this.$route.params.id ?post方式傳參時拾并，獲取id的值
this.$route.query.id get方式傳參時獲取id的值
this.$route.hash 當(dāng)前路由的hash值揍堰，帶#
// 解決路由返回之后頁面位置問題 始終回到最頂部
? ? scrollBehavior (to, from, savedPosition) {
? ? ? return { x: 0, y: 0 }
? ? }
鏈接：http://www.reibang.com/p/798268fb802e
全部的路由鉤子函數(shù)（導(dǎo)航首位）
11.1router.beforeEach ?全局前置首位? (路由跳轉(zhuǎn)前驗(yàn)證登錄)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
? // ...
})
to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)嗅义。
鏈接：http://www.reibang.com/p/4c8358f73e03
11.2router.beforeResolve 全局解析守衛(wèi)
11.3router.afterEach 全局后置守衛(wèi)
11.4beforeEnter 路由獨(dú)享守衛(wèi)
組件內(nèi)守衛(wèi)
11.5beforeRouterEnter 進(jìn)入
11.6beforeRouterUpdate ?更新
11.7beforerouteLeave 離開
/*全局前置守衛(wèi)*/
router.beforEach(function(to ,from ,next){
? ? //to 將要進(jìn)路的路由 route
? ? //from 離開的路由 route
? ? //next? 進(jìn)入下一個路由 屏歹，不調(diào)用則不會進(jìn)入下一個路由
? ? console.log('全局前置守衛(wèi)')
? ? next()
})
/*全局解析守衛(wèi)*/
router.beforeResolve((to,from,next)=>{
? ? //to 將要進(jìn)路的路由 route
? ? //from 離開的路由? route
? ? console.log('全局解析守衛(wèi)')
? ? next()
})
/*全局后置守衛(wèi)*/
router.afterEach((to,from)=>{
? ? //to 將要進(jìn)路的路由 route
? ? //from 離開的路由 route
? ? ? ? console.log('全局后置守衛(wèi)')
})
/*組件獨(dú)享守衛(wèi)*/
beforeEnter(to,from,next){
? ? console.log('組件內(nèi)獨(dú)享守衛(wèi)')
? ? ? next()
}
/*進(jìn)入*/
beforeRouterEnter(to,from,next){
? ? console.log('組件內(nèi)守衛(wèi)進(jìn)入')
? ? next()
},
/*更新*/
beforeRouterUpdate(to,from,next){
? ? console.log('組件守衛(wèi)更新')
? ? ? ? next()
},
/*離開*/
beforeRouteLeave(to,from,next){
? ? console.log('組件內(nèi)守衛(wèi)離開前')
? ? ? ? next()
}
執(zhí)行順序：
1.前組件內(nèi)守衛(wèi)離開
2.全局前置守衛(wèi)
3.路由獨(dú)享守衛(wèi)
4.組件內(nèi)守衛(wèi)進(jìn)入
5.全局解析守衛(wèi)
6.全局后置守衛(wèi)
或者時刷新組件時（/about 跳轉(zhuǎn)到/about?id=1111）
1.全局前置守衛(wèi)
2.組件內(nèi)守衛(wèi)更新
3.全局解析守衛(wèi)
4.全局后置守衛(wèi)
