vue-router筆記-未完。。。

vue-router: 爲了實現單頁面應用，產生的前端路由。匹配不同的url路徑，進行解析，然後動態的渲出區域的html內容。
使用步驟
1. 安裝
2. import引入
3. 註冊插件-vue.use()
4. 配置[{path: ‘xx’, compontent: xxx}]
5. 初始化new Vue({router})
6. 使用路由

	* 鏈接<router-link> 下面是屬性：
		* to
		* replace
		* append
		* tag
		* active-class
		* exat-active-class
		* event
	* 路由展示<router-view>

緩存路由組件<keep-active>是Vue內置的一個組件，可以使被包含的組件保留狀態，避免重新渲染

動態路由匹配

	path: '/hi/:id
	<router-link :to="'/hi/'+'judy'">hi頁面</router-link>
	<router-link :to="{name:'hi',params:{username:'judy'}}">hi頁面</router-link>

query，params
1. Query方式傳參和接收參數：this.router.push({path: ‘/xx’， query: {id:id}}) 接收參數this.route.query.id（相當於get請求，參數會在地址欄中顯示）
2. Params方式傳參和接收參數this.router.push({name: ‘xxx’, params:{id:id}})接收參數 this.route.params.id (相當於post請求，參數不會在地址欄中顯示)

$router $route
1. Router爲vueRouter實例，想要導航到不同 URL，則使用 $router.push 方法
2. $route爲當前router跳轉對象，裏面可以獲取 name 、 path 、 query 、 params 等

導航守衛

1. 全局導航鉤子

   • 路由導航前置守衛：router.beforeEach((to,from,next) => {})
   • 路由導航後置守衛：router.afterEach((to,from) => {})
   • router.beforeResolve((to,from.next) => {})

2. 路由組件內鉤子

   • beforeRouterEnter
   • beforeRouterUpdate
   • beforeRouterLeave

3. 單獨路由獨享組件

   • beforeEnter

完整的導航解析流程
xxxxxxxxxxxxxx
hash/history

• 使用model屬性改變模式，默認爲hash

• 這種 # 後面 hash 值的變化，並不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。hash值的變化會觸發hashchange這個事件，通過這個事件我們可以知道hash值發生了哪些變化。

  • 將頁面分享到app上，有的app不支持#

• history 模式不帶 # 號，會有問題產生。

  • 訪問二級頁面，做刷新操作會出現404,需要後端配合配置apache或者nginx的url重定向，重定向到首頁路由。