vue detailed routing configuration

1、设置路由元信息
  在路由中:
    meta:{键值对};
  在对应组件中
    this.$route.meta.键名读取

2、路由过渡
  路由的过渡方式和组件一样，使得组件中的所有内容都按照过渡动画过渡
    <transition>
      <router-view></router-view>
    </transition>

3、路由的生命周期,具体看官网
  路由进入前请求数据更快

4、路由切换,再切换回来保持之前的高度(只在history模式下有效)
  再总路由中,与routes同级设置
    scrollBehavior(to当前路由,from之前路由,savePosition之前路由页面,滚动条坐标)
    {
      console.log(savePosition.x); 获取之前路由滚动条x坐标
      console.log(to.path); 获取当前路由url相对路径

      return {x:坐标数值,y:坐标数值}
    }
    其中:
      若路由有transition动画,必须设置定时器等到动画结束才能设置,否则失效

5、保持路由切换状态
  <keep-alive>
    <router-view></router-view>
  </keep-alive>

 6、路由懒加载(当点击/某些判断后才加载路由,按需加载,降低页面大小)
   在路由的component中
    将component=组件,替换成
      component=()=>{
        若要进行判断xx
        return import('组件路径,加.vue后缀')
      }

 7、将组件按组分块(即打包多个组件,在按需加载时,加载额外的组件)
    import(/* webpackChunkName: "group-foo" */ './Baz.vue')

      将某个路由下的所有组件都打包在同个异步块 (chunk) 中,加载Baz.vue组件时,会同时加载group-foo
      比如:打开了一个页面想打开另一个页面时,就可以将两个页面的组件一起加载