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