vue路由vue-router

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 默認使history模式
 routes: [ { path: '/', name: 'home', component: () => import(xxx.vue) }, { path: '/about', name: 'about', component: () => import() } ] })

　　2.路由的跳轉

　　　　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.路由的前進

　　　　this.$router.forward()　

　　5.替換當前路由，在路由歷史中不會再出現該路由

　　　　this.$router.replace(location)

　　6.當前路由的對象屬性(必定要記得是小寫的$route，而且沒有r)

　　 　　this.$route.path   當前路由路徑 path

　　　　 this.$route.name  當前路由名稱

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

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

　　　　this.$route.hash 當前路由的hash值，帶#

　　 7.linkActiveClass

　　　　當前激活的路由的class類名，默認是"router-link-active"

　　8.scrollBehavior　

　　　　切換路由時頁面滾動到具體位子

　　9.router-link 中的tag標籤，生成具體的標籤的html 元素

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

　　11.所有的路由鉤子函數（導航首位）

　　　　11.1router.beforeEach  全局前置首位

　　　　11.2router.beforeResolve 全局解析守衛

　　　　11.3router.afterEach 全局後置守衛

　　　　11.4beforeEnter 路由獨享守衛

　　　　組件內守衛

　　　　11.5beforerouteEnter 進入

　　　　11.6beforerouteUpdate  更新

　　　　11.7beforerouteLeave 離開

　　　　

/* 全局前置守衛 */ router.beforeEach(function (to, from, next) { // to 將要進路的路由 route
  // from 離開的路由 route
  // next 進入下一個路由，不調用則不會進入下一個路由
  console.log('全局前置守衛') next() }) /* 全局解析守衛 */ router.beforeResolve((to, from, next) => { // to 將要進路的路由 route
  // from 離開的路由 route
  console.log('全局解析守衛') next() }) /* 全局後置守衛 */ router.afterEach((to, from) => { // to 將要進路的路由 route
  // from 離開的路由 route
  console.log('全局後置守衛') })

/* 組件獨享守衛 */ beforeEnter(to, from, next) { console.log('組件內獨享守衛') next() }

beforeRouteEnter(to, from, next) { console.log('組件內守衛進入') next() }, beforeRouteUpdate(to, from, next) { console.log('組件內守衛更新') next() }, beforeRouteLeave(to, from, next) { console.log('組件內守衛離開前') next() }

　　執行順序，

　　　　1.前組件內守衛離開

　　　　2.全局前置守衛

　　　　3.路由獨享守衛

　　　　4.組件內守衛進入

　　　　5.全局解析守衛

　　　　6.全局後置守衛

　　或者時刷新組件時（/about 跳轉到/about?id=1111）

　　　　1.全局前置守衛

　　　　2.組件內守衛更新

　　　　3.全局解析守衛

　　　　4.全局後置守衛