vue路由高級語法糖

1.當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由參數}}或者{{$route.query取到參數}}或者{{$route.hash取到hash}} 實例中(js)可用：this.$route.params.xxx/this.$route.query.xxx取到路由參數； 2.通過$router 訪問路由實例； 3.路由帶參數： const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
router.push({ path: 'register', query: { plan: 'private' }}) // 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
4.路由歷史記錄： window.history.go(n) router.go(n) History.back() //歷史記錄中的上一頁
History.forward()    //歷史記錄中的下一頁 在window.history里新增一個歷史記錄點 存儲當前歷史記錄點 //當前的url為：http://qianduanblog.com/index.html
var json={time:new Date().getTime()}; window.history.pushState（）三個參數： //1.狀態對象：記錄歷史記錄點的額外對象，可以為空 //2.頁面標題：目前所有瀏覽器都不支持 //3.可選的url：瀏覽器不會檢查url是否存在，只改變url，url必須同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html"); 執行了pushState方法后，頁面的url地址為http://qianduanblog.com/post-1.html。
替換當前歷史記錄點:window.history.replaceState（）不會在window.history里新增歷史記錄點 其效果類似於window.location.replace(url)，都是不會在歷史記錄點里新增一個記錄點的; 監聽歷史記錄點:直觀的可認為是監聽URL的變化，但會忽略URL的hash部分，監聽URL的hash部分，HTML5有新的API為onhashchange事件 通過window.onpopstate來監聽url的變化；並且可以獲取存儲在該歷史記錄點的狀態對象； //當前的url為：http://qianduanblog.com/post-1.html
window.onpopstate=function(){ // 獲得存儲在該歷史記錄點的json對象
    var json=window.history.state; //點擊一次回退到：http://qianduanblog.com/index.html
    //獲得的json為null
    //再點擊一次前進到：http://qianduanblog.com/post-1.html
    //獲得json為{time:1369647895656}
} 注意：js腳本執行window.history.pushState和window.history.replaceState不會觸發onpopstate事件。 5.路由重定向 { path: '/a', redirect: { name: 'foo' }}  //重定向的目標也可以是一個命名的路由
vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載； 6.路由元信息: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, meta: { requiresAuth: true } } ] } ] }) 對應： router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 確保一定要調用 next()
 } }) 7.滾動行為：當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置； 注意: 這個功能只在支持 history.pushState 的瀏覽器中可用；（也就是mode: 'history'） const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } // return 期望滾動到哪個的位置
 } }) 對於所有路由導航，簡單地讓頁面滾動到頂部； scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } 如果你要模擬『滾動到錨點』的行為： scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } } 異步滾動： scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ x: 0, y: 0 }) }, 500) }) } 8.Router 構造配置： mode：可選值: "hash（默認值瀏覽器環境）" | "history" | "abstract（默認值Node.js 環境）", base:"/",(默認值)應用的基路徑 linkActiveClass:"router-link-active"(默認值), linkExactActiveClass(2.5.0+):"router-link-exact-active"(默認值), scrollBehavior:滾動行為function; parseQuery / stringifyQuery:提供自定義查詢字符串的解析/反解析函數。覆蓋默認行為function;
fallback(2.6.0+):當瀏覽器不支持 history.pushState 控制路由是否應該回退到 hash 模式。默認值為 true。 類型: boolean,在 IE9 中，設置為 false 會使得每個 router-link 導航都觸發整頁刷新。它可用於工作在 IE9 下的服務端渲染應用，因為一個 hash 模式的 URL 並不支持服務端渲染。 9.路由信息對象 $route.path:字符串，對應當前路由的路徑, $route.params:一個 key/value 對象，包含了動態片段和全匹配片段，如果沒有路由參數，就是一個空對象,
$route.query:一個 key/value 對象，表示 URL 查詢參數,如果沒有查詢參數，則是個空對象。
$route.hash:當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字符串。 $route.fullPath:string類型完成解析后的 URL，包含查詢參數和 hash 的完整路徑。 $route.matched:一個數組，包含當前路由的所有嵌套路徑片段的路由記錄。 $route.name:當前路由的名稱，如果有的話。(查看命名路由) $route.redirectedFrom:如果存在重定向，即為重定向來源的路由的名字。 在 HTML5 history 模式下，router-link 會守衛點擊事件，讓瀏覽器不再重新加載頁面。 當你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫（基路徑）了。 10.導航守衛： 一、全局守衛 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...
}) to: Route: 即將要進入的目標 路由對象 from: Route: 當前導航正要離開的路由 next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。 next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed （確認的）。 next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。 next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。 next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。 確保要調用 next 方法，否則鈎子就不會被 resolved。
 二、全局后置鈎子 router.afterEach((to, from) => { // ...
}) 二、路由獨享的守衛 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...
 } } ] }) 三、組件內的守衛 const Foo = { template: `...`, beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實例
 }) // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`,你可以通過傳一個回調給 next來訪問組件實例
    // 因為當守衛執行前，組件實例還沒被創建
 }, beforeRouteUpdate (to, from, next) { // 在當前路由改變，但是該組件被復用時調用
    // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
 }, beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
 } } 11.路由懶加載 import page1 from './routes/page1.vue' const page2 = r => require.ensure([], () => r(require('./routes/page2.vue'))) const routes = [ { path: '/main', component: page1 }, { path: '/other', component: page2 } ] //這兩條路由被打包在相同的塊中，訪問任一路由都會延遲加載該路由組件
//有時候我們想把某個路由下的所有組件都打包在同個異步 chunk 中。(借助WebPack的require.ensure())
語法：require.ensure(dependencies: String[], callback: function(require), chunkName: String) const page1= r => require.ensure([], () => r(require('./routes/page1.vue')), 'big-pages') const page2 = r => require.ensure([], () => r(require('./routes/page2.vue')), 'big-pages') 寫法二： export default new Router({ routes: [ { path: '/', component: resolve => require(['components/Hello.vue'], resolve) }, { path: '/about', component: resolve => require(['components/About.vue'], resolve) } ] }) 12.vue組件的按需加載（2種方式） 組件里面： components: { bview: resolve => {require(["./b.vue"], resolve);} }, 模板里面： <component :is="current" :data="myData" ></component>
 data() { return { current: "", myData:"", show:false } }, methods: { changeComponents(view){ if(view=='aview'){ this.myData='a1000'; } else{ this.myData='b1000'; } this.current=view; } }