vue-router小记

vue-router使用：
1、路由懒加载

import home from '@/components/home'
const login = resolve => require(['@/components/login'], resolve)
const routes = [
  {
    path: '/',
    name: 'home',
    component: home
  },
  {
    path: '/login',
    name: 'login',
    component: login
  }
]

  如果组件都直接如上import引入，打包时会把所有组件打成一个app.js，导致首页打开加载慢，移动端优化需注意
  路由懒加载，使用异步组件，减少首页加载js大小，webpack分割代码打包，能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，另外打包的vendor.js文件是依赖的插件，去除不使用的减少打包大小
  减少打包体积：组件异步加载；webpack 的压缩插件UglifyJsPlugin；服务器端还可以开启 gzip 压缩

2、路由跳转

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: 'user', query: { userId: 123 }}">User</router-link>
this.$router.push({name:'user',params:{ userId: 123 }});//路由不显示传参值，但刷新页面参数丢失
this.$router.push({name:'user',query:{ userId: 123 }});
//接收值
this.$route.params.userId;
this.$route.query.userId;

使用params方法传参，刷新页面params值会丢失，使用query方法则不会。解决：要在路由后面加参数名（path: '/user/:userId',），并且参数名要跟路由后面设置的参数名对应

// 前进一步，等同history.forward()
this.$router.go(1)
// 后退一步，等同history.back()
this.$router.go(-1)
this.$router.back()
//替换,等同window.location.href.replace()
this.$router.replace()
//获取完整路径，
window.location.href
//获取当前路由路径及附带参数
this.$route.fullPath
//获取当前路由的路径
this.$route.path

this.$router.replace()使用，有一个授权页，成功授权后，跳到下个页面，用replace去替换掉自身的访问记录，防止用户跳到下个页面后按后退键回退到授权页，而导致重复授权。

3、重定向
{path: '*', redirect: '/index'}
{path: '*', redirect: '/page404'}
防备用户手动输入不存在的路由，重定向跳转首页或404页面

4、 hash 模式和HTML5 History 模式
  url（#）一种是锚点（http://www.kuaizis.com），如回到顶部按钮；另一种路由里的 # 称之为 hash，根据hash 值的改变不会引起页面的刷新，单页面应用路由系统大多都是哈希实现的。
  History 模式（去掉#），vue路由中配置mode: 'history'即可。不过打包vue项目上线还需server端配合，否则刷新页面会出现404错误。History 模式是基于 HTML5 ，在 HTML5 中提供了 history.pushState || history.replaceState 来进行路由控制。

5、动态路由
权限管理动态设置权限使用addRoutes
参考：
https://github.com/lenve/vhr
http://refined-x.com/Vue-Acce...

6、路由导航
全局的
可用于做权限，判断是否已经登录，判断权限的路由，已登录再跳转登录页、未登录跳转没权限的时候做处理

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  //to:即将要进入的目标
  //from: 正要离开的路由
  //next: 
  //中断，重置到 from 路由 next(false);
  //跳转 next({path:'/login'}); next({name: 'login'});
})
router.afterEach((to, from) => {
  // 可结合beforeEach加载进度条
})

路由守卫beforeEnter ，直接在路由里配置
组件守卫beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave在组件内配置
7、过渡动效

//v-enter;v-enter-active;v-enter-to;v-leave;v-leave-active;v-leave-to
//name重置前缀，比如 v-enter 替换为 my-transition-enter
<transition name="my-transition">
  <router-view></router-view>
</transition>

推荐第三方Animate.css
结合使用
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

8、滚动记忆

scrollBehavior (to, from, savedPosition) {}

scrollBehavior与过渡动画、keep-alive一起使用h5模仿手机端原生体验，返回前进都定位到之前页面滚动位置