vue开发多页应用,vue实现多页面
这篇文章主要介绍了某视频剪辑软件实现多页签组件的方法，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
直接看效果，增加了右键菜单，分别有重新加载、关闭左边、关闭右边、关闭其他功能。
也可以到我的开源代码库上看看代码（如果觉得这个组件有用的话，别忘了顺手给个小星星)
代码：https://github。com/Caijt/VuePageTab
演示：https://caijt。github。io/VuePageTab/
我这个多页签组件里面的删除缓存的方法不是使用点火电极组件自带的包含、执行结合的效果，而是使用暴力删除缓存的方法，这个在上个博客中也有提到，用这种方法的话，可以实现更完整的多页签功能，例如同个路由可以根据参数的不同同时打开不同的页签，也能不用去写那些路由的名字值。
先直接看组件代码（里面用了一些元素-用户界面的组件，如果你们不用元素-用户界面的话。可以去掉，自己实现)
模板
div class= _ _公共布局页面选项卡
埃尔滚动条
div class=__tabs
差异
class=__tab-item
v-for= openedPageRouters中的项目
:class={
“_ _是活动的”:项目。完整路径==$ route。完整路径，
}
:key=item.fullPath
@click=onClick(item)
@上下文菜单。prevent= showContextMenu($ event，item)
{{ item.meta.title }}
跨度
el图标-关闭
@click.stop=onClose(item)
@contextmenu.prevent.stop=
:style= openedpagerouters。“长度=1？”宽度：0; :
/span
/div
/div
/El-滚动条
div v-show=contextMenuVisible
保险商实验所
:style= { left:context menu left px ，top: contextMenuTop px }
class=__contextmenu
里
El-button type= text @ click= reload() size= mini
重新加载
/el-button
/李
里
埃尔按钮
type=text
@ click= closeOtherLeft
:disabled=false
size=mini
关闭左边/el-button
/李
里
埃尔按钮
type=text
@ click= closeOtherRight
:disabled=false
size=mini
关闭右边/el-button
/李
里
El-button type= text @ click= close ther size= mini
关闭其他/el-button
/李
/ul
/div
/div
/模板
脚本
导出默认值{
道具：{
keepAliveComponentInstance: {}，//保持活动状态控件实例对象
blankRouteName: {
类型：字符串，
默认值："空白",
}, //空白路由的名字值
},
data() {
返回{
contextMenuVisible: false，//右键菜单是否显示
contextMenuLeft: 0，//右键菜单显示位置
contextMenuTop: 0，//右键菜单显示位置
contextMenuTargetPageRoute:null，//右键所指向的菜单路由
openedPageRouters: []，//已打开的路由页面
};
},
观察：{
//当路由变更时，执行打开页面的方法
$route: {
处理程序{
这个。打开第五页；
},
即时：真的，
},
},
已安装(){
//添加点击关闭右键菜单
window.addEventListener(click ，this。closecontextmenu)；
},
销毁(){
窗户。removeeventlistener( click ，this。closecontextmenu)；
},
方法：{
//打开页面
openPage(route) {
如果(路线。name==this。blankroutename){
返回；
}
让存在=这个。openedpagerouters。一些(
(项目)=项目。完整路径==路由。全称路径
);
如果(!isExist) {
让openedPageRoute=this。openedpagerouters。查找(
(item)=item.path==route.path
);
//判断页面是否支持不同参数多开页面功能，如果不支持且已存在小路值一样的页面路由，那就替换它
如果(!路线。meta。可以多次打开openedPageRoute！=null) {
这个。delroutecache(openedpageroute。完整路径)；
this.openedPageRouters.splice(
这个。openedpagerouters。(打开的页面)的索引，
1,
途径
);
}否则{
这个。openedpagerouters。推(路线)；
}
}
},
//点击页面标签卡时
onClick(路由){
if (route.fullPath！==这个. route.fullPath) {
这个1000美元路由器。推(路线。完整路径)；
}
},
//关闭页面标签时
onClose(路线){
让index=this。openedpagerouters。(路线的)索引；
this.delPageRoute(路由);
if (route.fullPath===this .$route.fullPath) {
//删除页面后，跳转到上一页面
这个. router.replace(
这个。openedpagerouters[index==0？0:索引- 1]
);
}
},
//右键显示菜单
showContextMenu(e，route) {
这个。contextmenutargetpageroute=route；
这个。context menuleft=e . layerx
这个。上下文菜单top=e . layery
this.contextMenuVisible=true
},
//隐藏右键菜单
closeContextMenu() {
this.contextMenuVisible=false
这个。contextmenutargetpageroute=null；
},
//重载页面
reload() {
这个。delroutecache(这个。contextmenutargetpageroute。完整路径)；
如果(这个。contextmenutargetpageroute。完整路径===this .$route.fullPath) {
这个1000美元路由器。替换({ name:this。blankroutename }).然后(()={
这个1000美元路由器。替换(这个。contextmenutargetpageroute)；
});
}
},
//关闭其他页面
closeOther() {
对于(设I=0；我这个。openedpagerouters。长度；i ) {
设r=这个。openedpagerouters[I]；
if (r！==这个。contextmenutargetpageroute){
这个。delpage路线(r)；
I-；
}
}
如果(这个。contextmenutargetpageroute。完整路径！=这个. route.fullPath) {
这个1000美元路由器。替换(这个。contextmenutargetpageroute)；
}
},
//根据路径获取索引
getPageRouteIndex(完整路径){
对于(设I=0；我这个。openedpagerouters。长度；i ) {
if (this.openedPageRouters[i].完整路径===完整路径){
返回我；
}
}
},
//关闭左边页面
closeOtherLeft() {
让index=this。openedpagerouters。的索引(
这个。上下文菜单targetpageroute
);
让当前索引=这个。getpagerouteindex(this .$ route。完整路径)；
if (index currentIndex) {
这个1000美元路由器。替换(这个。contextmenutargetpageroute)；
}
对于(设I=0；我指数；i ) {
设r=这个。openedpagerouters[I]；
这个。delpage路线(r)；
I-；
索引-;
}
},
//关闭右边页面
closetherright(){
让index=this。openedpagerouters。的索引(
这个。上下文菜单targetpageroute
);
让当前索引=这个。getpagerouteindex(this .$ route。完整路径)；
对于(设我=索引1;我这个。openedpagerouters。长度；i ) {
设r=这个。openedpagerouters[I]；
这个。delpage路线(r)；
I-；
}
if (index currentIndex) {
这个1000美元路由器。替换(这个。contextmenutargetpageroute)；
}
},
//删除页面
delPageRoute(路线){
让路由索引=这个。openedpagerouters。(路线的)索引；
if (routeIndex=0) {
这个。openedpagerouters。拼接(路由索引，1)；
}
这个。delroutecache(路线。完整路径)；
},
//删除页面缓存
delRouteCache(键){
让cache=this。keepalivecomponent实例。缓存；
让钥匙=这个。keepalivecomponent实例。钥匙；
对于(设I=0；I key . length I){
if (keys[i]==key) {
keys.splice(i，1)；
if (cache[key]！=null) {
删除缓存[键];
}
打破；
}
}
},
},
};
/脚本
样式lang=scss 。_ _公共布局页面选项卡{。_ _上下文菜单{
//宽度：100像素
边距：0;
边框：1px实心# e4e 7版；
背景：# fff
z指数：3000;
位置：绝对；
列表样式类型：无；
填充：5px 0；
边框-半径：4px
字体大小：14px
颜色：# 333;
box-shadow: 1px 1px 3px 0 rgba(0，0，0，0.1)；
李{
边距：0;
填充：0像素15像素
：悬停{
背景：# f2f2f2
光标：指针；
}
按钮{
颜色：# 2c3e50
}
}
}
$ c-tab-border-color:# DCD Fe 6；
位置：相对；
*之前{
内容："";
border-bottom:1px solid $ c-tab-border-color；
位置：绝对；
左：0;
右：0;
底部：0;
身高：100%;
}。_ _选项卡{
显示器：flex。_ _选项卡-项目{
空白：nowrap
填充：8px 6px 8px 18px
字体大小：12px
边框：1px纯色$ c-tab-border-color；
border-left:无；
边框-底部：0px
行高：14px
光标：指针；
过渡：颜色0.3s三次贝塞尔曲线(0.645，0.045，0.355，1)，
填充0.3s三次贝塞尔(0.645，0.045，0.355，1)；
:第一个孩子{
border-left:1px solid $ c-tab-border-color；
border-top-left-radius:2px；
左边距：10px
}
:最后一个孩子{
border-top-right-radius:2px；
右边距：10px
}
:不是(。_ _处于活动状态):悬停{
颜色：# 409eff。El-图标-关闭{
宽度：12px
右边距：0px
}
}。_ _处于活动状态{
填充-右侧：12px
边框-底部：1px solid # fff
颜色：# 409eff。El-图标-关闭{
宽度：12px
右边距：0px
左边距：2px
}
}。El-图标-关闭{
宽度：0px
高度：12px
溢出：隐藏；
边界半径：50%；
字体大小：12px
右边距：12px
变换-原点：100% 50%；
过渡：全0.3s三次-贝塞尔(0.645，0.045，0.355，1)；
垂直对齐：文本顶部；
:悬停{
背景色：# c 0 C4 cc；
颜色：# fff
}
}
}
}
}
/风格
这个组件它需要两个属性，一个是keepAliveComponentInstance（keep-alive的控件实例对象），blankRouteName（空白路由的名称）
为什么我需要keep-alive的控件实例对象？因为这个对象中有两个属性，一个是cache，一个是keys，存储keep-alive的缓存数据。有了这个对象，我可以在选项卡关闭时手动删除缓存。那怎么得到这个对象呢？如下所示，在keep-alive所在的父页面上的mounted事件上获取它(如果keep-alive与多选项卡组件不在同一个父页面上，您可能需要借用vuex来传递值)
模板
div id=应用程序
page-tabs:keep-alive-component-instance= keepalivecomponent instance /
div ref=keepAliveContainer
点火电极
router-view:key= $ route . full path /
/保持活力
/div
/div
/模板
脚本
从导入页面选项卡。/components/page tabs . vue ；
导出默认值{
名称：“应用程序”，
组件：{
页面选项卡，
},
已安装(){
如果(这个。$refs.keepAliveContainer) {
this . keepalivecomponent instance=this。$ refs . keepalivecontainer . child nodes[0]。_ _ vue _ _//获取keep-alive的控件实例对象
}
},
data() {
返回{
keepalivecomponent instance:null，
};
}
};
/脚本
空白航线的名称是什么？主要是想刷新当前页面。我们知道vue是不允许跳转到当前页面的，所以我觉得我先跳转到另一个页面，然后再跳转回回来的页面，这样也会达到刷新的效果。(当然我用的是relpace，所以不会产生历史记录)
注意：此空白路由不在根路由上定义，但取决于多选项卡组件的位置。如果您有一个根路由器视图和一个布局组件，布局组件也有一个子路由器视图，多选项卡组件在此布局组件中，则需要在对应于布局组件的路由的子组件中定义空白路由。
此外，该组件将根据路由对象的元对象进行不同的配置，如下所示。
让路由器=新路由器({
路线：[
//这是一个空白页，将用于重新加载当前页面
{
名称：空白，
路径：“/blank”，
},
{
路径：“/a”，
成分：A，
元：{
标题： A页A ，//页标题
CANopen:true//支持根据不同的参数打开不同的标签页。如果需要/a和/a？V=123两个选项卡都是单独打开的。请设置为true，否则只显示一个标签页，后面打开的会被前面打开的替换。
}
}
}
这就是Vue实现多标签组件的细节。更多关于Vue实现多标签组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。