vue-router 知識點

• vue-router配置scrollBehavior
  第三個參數 savedPosition 當且僅當 popstate 導航 (經過瀏覽器的 前進/後退 按鈕觸發) 時纔可用。
  注意: 這個功能只在 HTML5 history 模式下可用。
  路由配置（先參照這個網址，配置上scrollBehavior函數：https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js）：

export default new Router({
    mode: 'history',
    scrollBehavior,
    routes: [
        {
            path: '/',
            name: 'StoreDemo',
            component: resolve => require(['../components/StoreDemo'], resolve),
            // 配置了scrollToTop爲true，點擊這個路由，頁面會滾到頂部
            // 若是沒配置scrollToTop或配置scrollToTop爲false，點擊這個路由，頁面保持原先的滾動位置
            // 效果說明：點擊這個路由後，滾動頁面隱藏頂部的一部分，再點擊路由：/promisedemo,頁面保持原先的滾動位置;再點擊這個路由,頁面會滾動到頂部，由於配置了scrollToTop爲true
            meta: { scrollToTop: true }
        },
        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
        }
　]
})

詳細代碼見：https://github.com/cag2050/vue_product_demo/blob/master/src/router/index.js

• vue-router配置路由，使用vue的異步組件技術，能夠實現按需加載。
  可是，這種狀況下一個組件生成一個js文件。
  舉例以下：

{
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

• vue-router配置路由，使用webpack的require.ensure技術，也能夠實現按需加載。
  這種狀況下，多個路由指定相同的chunkName，會合並打包成一個js文件。
  舉例以下：

{
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
        }

• 問：使用vue-router以後，頁面的切換是局部刷新，這樣就會產生一個問題，若是某個頁面這個用戶沒有權限訪問，這個如何來控制？
  答：有了導航鉤子，這個天然就能夠放到導航鉤子來執行。

• 點擊<router-link :to="...">等同於調用router.push(...)

• 前端路由，直接請求相應的組件；
  後端路由，請求後會將頁面整個刷新。

• location.href 會先走後端路由；

• vue-router的這種寫法走前端路由：

next({
　　path: '/process'
})

• 嵌套路由：children

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