admin管理员组文章数量:1633782
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;
}
版权声明:本文标题:vue 路由详细配置 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729178339a1189001.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论