vue 路由详细配置

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
		include:'组件的name,非路由中的name'  	字符串/正则要缓存的组件
		exclude:'name1,name2'		 不缓存的组件
		不写参数默认全部缓存
	  >
	    <router-view></router-view>
	  </keep-alive>
	 指定缓存方式二:
	  <keep-alive>
	    <router-view v-if='$route.meta.x'></router-view>
	  </keep-alive>
	  	<router-view v-if='!$route.meta.x'></router-view>

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

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

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

	将当前所在路由名称包括父路由的名称变成红色
		第一种:
			在主入口文件App.vue的style中设置
				.router-link-active{
					color:red;
				}
		第二种:
			1、在总路由js文件中,和routes同级
				linkActiveClass:'xx',
			2、在主入口文件App.vue的style中设置
				.xx{
					color:red;
				}
		第三种(能自定义未选中字体样式且不影响选中字体样式)
			直接给.active或.router-link-exact-active/.router-link-active或自定义类添加样式,但是都得使用!important提高权重,样式才会生效
	
	将当前所在路由名称变成红色,不改变父路由路径的颜色
		第一种:
			在主入口文件App.vue的style中设置
				.router-link-exact-active{
		            color:red;
		        }
		第二种:
			1、在总路由js文件中,和routes同级
				linkExactActiveClass:'xx',
			2、在主入口文件App.vue的style中设置
				.xx{
					color:red;
				}