使用element-plus 的菜单组件打开外部网址

1 使用数组动态生成的菜单，外部链接的对象结构如下

{id: 12,path: "https://",//要打开的网址meta: {title: "菜单名称",icon: "icon-menu-buy",linkIcon:'icon-menu-buy-link'},}

2 el-menu 添加 router 属性，当是打开外部链接的菜单项时index置空，不然会链接到 localhost:8080/要打开的网址；

在 menu-item 内部使用 a 标签打开链接，添加后发现只有 a 标签部分能够点击，其它地方点击无法打开新网址，所以需要让 a 标签占据整个 menu-item

<el-menurouter:default-active="activeMenu":unique-opened="true":collapse="!isShow"id="menu-wrap"@select="toPage"
><el-menu-item :index="computedIndex(item.path)" :key="item.path"><template #title><a class="link" v-if="targeLink(item.path)" :href="item.path" target="_blank"><span style="margin-left:48px">{{ item.meta.title }}</span></a><span v-else>{{ item.meta.title }}</span><span  v-if="targeLink(item.path)" class="icon link"  :class="item.meta.linkIcon"></span></template></el-menu-item>
</el-menu>

使用的样式

a.link {position: absolute;top: 0;left: 0;right: 0;bottom: 0;
}

3 外部链接不应该被激活

为了防止点击链接后被激活，添加 default-active 属性，子路由同样需要使菜单高亮，在子路由 meta 中添加需要激活的路由地址,children路由如下，当meta含有activeMenu时，返回activeMenu；否则返回 path

children:[{path: "detail",name: "Detail",meta: {activeMenu:'/父级路由'},component: () =>import(),},
]

4 解决在子级路由点击外部链接时，参数被清空的问题

在向子级页面传参时使用的 query 传参，修改为 params 传参即可

//path 修改如下path: "detail/:参数1/:参数2..../:参数n",
// 传参方式
this.$router.push({name: "Detail",params: {参数1: 参数1,参数2: 参数2,....参数n: 参数n,},
});//接收参数
this.$route.params.参数1

注：传递的参数不能是空字符串，会被认为没有传递参数，报错。

使用el-menu打开新标签页到外部网址相关推荐

关于钉钉工作台无法打开新标签页的解决方案
项目场景:钉钉内打开新标签页项目场景:在钉钉后台页面点击打开新标签页的时候,在钉钉内打开新标签页问题描述在钉钉后台页面点击打开新标签页的时候,我们需要在钉钉内打开,而浏览器会自动弹出并打开页面. ...
解决Chrome浏览器打开新标签页，显示“无法访问此网站连接已重置”的问题【在54.0 beta版上测试通过】
1. 问题描述在浏览器中打开新标签页,无法正常进入带搜索框的新标签页,而是出现错误:无法访问此网站连接已重置. 2. 解决办法按照这篇博客的做法(http://www.cnblogs.com/c ...
js 页面跳转两种方式（原页面跳转，打开新标签页）
1 页面跳转(原页面跳转) (1)a标签实现 <a href="https://blog.csdn.net/qq_38974638">旭东怪的博客</a> ...
如何在Firefox火狐浏览器点击链接打开新标签页、搜索、和书签
如何在Firefox火狐浏览器点击链接打开新标签页.搜索.和书签在新标签页打开网页上的链接(点击链接打开新标签页) 在新标签中打开搜索结果在新标签页打开书签打开Firefox火狐浏览器设置在F ...
火狐浏览器打开新标签页为主页的插件
https://addons.mozilla.org/zh-CN/firefox/addon/new-tab-homepage/ 这个插件挺好用的,我的个人习惯,之前是不喜欢使用火狐的,使用了一段时间 ...
Chrome浏览器，修改打开新标签页是Bing搜索默认页
Chrome谷歌浏览器,使用默认的搜索引擎设置,当选择为Bing的时候,虽然默认搜索引擎设置为Bing了,但是打开新标签页的时候,我们看不到"最常访问站点"的列表. 这样就很不方便 ...
火狐浏览器打开新标签页为空白页
个人比较喜欢用firefox浏览器每次打开新标签页的时候,都只是一个空白页,还得自己输入地址...好麻烦. 在地址栏,输入 about:config,然后按 Enter. 可能会出现这样可能会失 ...
【解决方案】chrome打开新标签页自动打开chrome://newtab并且跳转到谷歌香港
简述天,昨天开始遇到这个问题,还没有留心,结果今天多次使用chrome的时候,就发现有些不对了.. 打开chrome的新标签页,结果出现了自动跳转的问题我自动跳转的是下面这个网页: https:/ ...
chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题
个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...

使用el-menu打开新标签页到外部网址

使用element-plus 的菜单组件打开外部网址

1 使用数组动态生成的菜单，外部链接的对象结构如下

2 el-menu 添加 router 属性，当是打开外部链接的菜单项时index置空，不然会链接到 localhost:8080/要打开的网址；

3 外部链接不应该被激活

4 解决在子级路由点击外部链接时，参数被清空的问题

使用el-menu打开新标签页到外部网址相关推荐

最新文章

热门文章