建设网站个人简介范文,网站的展现形式,wordpress设计师主题,怎么做情侣网站场景#xff1a;左侧菜单栏的菜单项有内部组件切换#xff0c;也会有点击后进入外链的情况#xff0c;如何同时处理这种情况#xff1f;
解决思路#xff1a;
在路由配置中path代表组件切换路径或者外链配置el-menu-item显示菜单项时#xff0c;使用动态路由形式#…场景左侧菜单栏的菜单项有内部组件切换也会有点击后进入外链的情况如何同时处理这种情况
解决思路
在路由配置中path代表组件切换路径或者外链配置el-menu-item显示菜单项时使用动态路由形式判断如果是组件切换使用is为router-link组件to为path如果是外链使用a标签形式path为href即可如果判断是否为外链正则匹配是否以/^(https?:|mailto:|tel:)/.test(path)即可
路由配置
{// path: /activity,path: https:www.baidu.com,name: activity,component: Activity
}
AppLink封装插槽形式显示el-menu-item
template!-- 通过动态组件显示如果是外链显示a标签如果是基础路由显示router-link --!-- 这里直接使用v-bindisExternalLink(to)会报错需要在上面加入一行注释:eslint-disable vue/require-component-is --!-- eslint-disable vue/require-component-is --component v-bindisExternalLink(to)slot/slot/component
/template
script
import { Validator } from bigbighu/cms-utils;
export default {name: AppLink,props: {to: {type: String,required: true}},methods: {isExternalLink(url) {// /^(https?:|mailto:|tel:)/.test(path)if (Validator.isExternal(url)) {return {is: a,href: url,target: _blank,rel: noopener};}return {is: router-link,to: url};}}
};
/script el-menu-item使用 !-- 判断是否是外链 --app-link v-ifchild.redirect ! noRedirect child.meta :toresolvePath(child.path)el-menu-item v-ifchild child.meta :indexresolvePath(child.path)i classel-icon-setting/ispan slottitle{{child.meta.title }}/span/el-menu-item/app-link
