個人github iSAM2016javascript
目錄
中途有一段時間去隔壁家的php玩了一遭，回頭看來，vuex、vue-router有了改變，一開始就對vue-route的細節不是很瞭解，今天總結一下。php
官網的例子：html
本身的一句話：vue
-
定義路由組件（汽車）java
const Foo = { template: 'git
foo' }
const Bar = { template: 'bar' -
定義路由（公路或導航）github
cost ruter = {
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
}vue-router -
建立實例（紅路燈）vuex
cosnt app = new Vue({
router}).$mount('#app')django
動態的路由匹配
一個頁面是常常重複使用的，傳遞一個參數就能夠了，好比傳遞一個ID號baidu.com?userId=123,這樣
就須要一個動態的路由來解決。
cost ruter = {
{ path: '/user：12', component: user } }
當一個路由使用是後面有動態的參數，會映射到this.$router.param 中，這是函數體內調用路由的方法
響應路由參數的變化
由於沒有仔細看官網的實例，這點沒有看待，我遇到一次坑。此次教訓並非粗心，是由於沒有仔細看文檔的好習慣，這個很差的習慣必須的改。就像數學老師說的迴歸到基本理論
這也是一個常見的問題，我問須要監聽hash值的改變,來查詢參數如：
- book/search?cat=1
- book/search?cat=2
但是隻有參數發生了改變，vue-router 認爲組件式能夠重用的，參數變化是不能引發重新向服務器獲取數據
const user = { wacth: { '$route' (to, from) { // 對路由變化做出響應... } } }
嵌套路由
像這樣的的嵌套 /user/foo/profile
<div id="root"> <router-view> </router-view> </div>
<router-view>是最頂層的出口，渲染最高級路由匹配到的組件。一樣地，一個被渲染
組件一樣能夠包含本身的嵌套
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // UserHome will be rendered inside User's <router-view> // when /user/:id is matched { path: '', component: UserHome }, // UserProfile will be rendered inside User's <router-view> // when /user/:id/profile is matched { path: 'profile', component: UserProfile }, // UserPosts will be rendered inside User's <router-view> // when /user/:id/posts is matched { path: 'posts', component: UserPosts } ] } ] })
函數式導航
注意 this.$route 和 this.router在使用上是有區別的
this.$router.push()
調用的方法
// 字符串 this.$router.push('home') // 對象 this.$router.push({ path: 'home' }) // 命名的路由 this.$router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數，變成 /register?plan=private this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.go(n)
意思是在 history 記錄中向前或者後退多少步
路由的命名
能夠爲路由設置，別名方便使用。如設置name, isshow
const router = new VueRouter({
routes: [ { path: '/user/:userId', name: 'user', isShow: false component: User } ] })
路由的命名:示例
切換路由的時候能夠修改頁面的標題
router.afterEach(transition => {
document.title = transition.name })
導航鉤子
導航鉤子
全局鉤子
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
主要用來攔截導航，讓他完成跳轉或取消。
參數：
to :Route: 標識即將進入的目標路由對象
from: Route 當前導航正要離開的路由
next: function 調用該方法來resolve 鉤子，它的參數：
- next(): 進行管道中的下一個鉤子
- next(false): 中斷當前的導航
- next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。
實例：檢測用戶登陸
全局的鉤子主要用來是，判斷用戶是否登陸
router.beforeEach((to, from, next) => { //頁面滾動到頂部 window.scroll(0, 0); //用戶沒有登陸了，而且還想訪問別的頁面，強制跳轉login頁 if (!auth.login() && to.path !== '/login') { next('login'); } else { //用戶已經登陸了，不在讓用戶訪問login頁 if (auth.login() && to.path === '/login') { next({ path: '/demo/user/list' }); } else { next(); } } })
某個路由獨享的鉤子（VIP組件）
const router = new VueRouter({ routes: [ path: '/foo', component: Foo, beforeEach: (to, from, next) => { } ] })
路由元信息
較難理解
咱們稱呼routers 配置中的每一個路由對象爲路由記錄。路由記錄能夠是嵌套的。好比http://localhost:3000/#/demo/user/list
這個地址中能夠說明路由記錄有三個，分別是：
- /demo
- /demo/use
- /demo/use/list
一個路由匹配到的多有路由記錄暴露在$route對象當中的$route.matched 數組當中，咱們須要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。
示例
路由對象信息
對象出現的地方，注意是route 沒有r結尾
| route Object出現的地方 |
|---|
| router.match(location) |
| this.$route |
| 全局鉤子 |
對象的屬性就不書寫了見路由信息對象的屬性
Router 實例
Router注意是 有r結尾
Router 實例屬性
$router.options
在$router 中有個鬼是$router.options 官網沒有找到，說明。
這個屬性包含了路由的樹形結構，能夠藉助這個來實現menu層級的劃分