vue 路由详细配置

红太狼 2021-07-24 11:27 403阅读 0赞

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;
    				}