vue路由插件，vuer Router,使vue官方的路由管理其，和vue高度耦合

　　1.vue-Router的使用　　

import Vue from 'vue'import Router from 'vue-router' //引入路由組件Vue.use(Router)new Router({  mode: 'history', //路由的兩種模式 hash 和history 默認(rèn)使history模式  routes: [  {   path: '/',   name: 'home',   component: () => import(xxx.vue)  },  {   path: '/about',   name: 'about',   component: () => import()  } ]})

　　2.路由的跳轉(zhuǎn)

　　　　this.$router.push('/path')

　　　　this.$router.push({name:'routername'})

　　　　路由的get方式傳值

　　　　this.$router.push({name:'routername',query:{id:xxx}})

　　　　路由的post方式傳值

　　　　this.$router.push({name:'routername',params:{id:xxx}})

　　3.路由的后退

　　　　this.$router.go(-1)　

　　　　this.$router.back()

　　4.路由的前進(jìn)

　　　　this.$router.forward()　

　　5.替換當(dāng)前路由，在路由歷史中不會(huì)再出現(xiàn)該路由

　　　　this.$router.replace(location)

　　6.當(dāng)前路由的對(duì)象屬性(一定要記得是小寫的$route，并且沒有r)

　　 　　this.$route.path   當(dāng)前路由路徑 path

　　　　 this.$route.name  當(dāng)前路由名稱

　　　　 this.$route.params.id  post方式傳參時(shí)，獲取id的值

　　　　 this.$route.query.id get方式傳參時(shí)獲取id的值

　　　　this.$route.hash 當(dāng)前路由的hash值，帶#

　　 7.linkActiveClass

　　　　當(dāng)前激活的路由的class類名，默認(rèn)是"router-link-active"

　　8.scrollBehavior　

　　　　切換路由時(shí)頁面滾動(dòng)到具體位子

　　9.router-link 中的tag標(biāo)簽，生成具體的標(biāo)簽的html 元素

　　10.router-view 路由組件具體渲染的地方

　　11.全部的路由鉤子函數(shù)（導(dǎo)航首位）

　　　　11.1router.beforeEach  全局前置首位

　　　　11.2router.beforeResolve 全局解析守衛(wèi)

　　　　11.3router.afterEach 全局后置守衛(wèi)

　　　　11.4beforeEnter 路由獨(dú)享守衛(wèi)

　　　　組件內(nèi)守衛(wèi)

　　　　11.5beforerouteEnter 進(jìn)入

　　　　11.6beforerouteUpdate  更新

　　　　11.7beforerouteLeave 離開

/* 全局前置守衛(wèi) */router.beforeEach(function (to, from, next) { // to 將要進(jìn)路的路由 route // from 離開的路由 route // next 進(jìn)入下一個(gè)路由，不調(diào)用則不會(huì)進(jìn)入下一個(gè)路由 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()   }

　beforeRouteEnter(to, from, next) {  console.log('組件內(nèi)守衛(wèi)進(jìn)入')  next() }, beforeRouteUpdate(to, from, next) {  console.log('組件內(nèi)守衛(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)

　　或者時(shí)刷新組件時(shí)（/about 跳轉(zhuǎn)到/about?id=1111）

　　　　1.全局前置守衛(wèi)

　　　　2.組件內(nèi)守衛(wèi)更新

　　　　3.全局解析守衛(wèi)

　　　　4.全局后置守衛(wèi)

總結(jié)

以上所述是小編給大家介紹的vue路由vue-route的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧！