若依官网: www.ruoyi.vip
点击菜单新标签页打开路由
点击“新标签页404”打开新的标签展示路由为/table的404页面。
第一步:先创建路由
router.js
{
path: '/table',
component: () => import('@/views/table/index'),
hidden: true
},
第二步: 进入菜单管理添加路由
进入项目中的【菜单管理】新增和修改菜单
第三步:修改代码
在菜单选项中有一个是否选择外链受到启发,我就直接去改源码了。最后锁定在Link.vue中。
<template>
<component :is="type" v-bind="linkProps(to)">
<slot />
</component>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: [String, Object],
required: true
}
},
computed: {
isExternal() {
return isExternal(this.to)
},
type() {
if (this.isExternal) {
return 'a'
}
return 'router-link'
}
},
methods: {
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
return {
to: to
}
}
}
}
</script>
就是上面这段代码。
其中isExternal就判断中包含是否有路由,可以参照这个写判断当前的路由是否是/table 。
isExternal() {
return isExternal(this.to)
},
// 改为
isTable() {
return this.to == '/table'
},
增加一个判断,如果是/table就为<router-link to="/table" target="_blank">
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
return {
to: to
}
}
// 改为
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
if(this.isTable) {
return {
to: to,
target: '_blank',
}
}
return {
to: to
}
}
代码整合一下
<template>
<component :is="type" v-bind="linkProps(to)">
<slot />
</component>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: [String, Object],
required: true
}
},
computed: {
isTable() {
console.log(this.to)
return this.to == '/screenB'
},
isExternal() {
return isExternal(this.to)
},
type() {
if (this.isExternal) {
return 'a'
}
return 'router-link'
}
},
methods: {
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
if(this.isTable) {
return {
to: to,
target: '_blank',
}
}
return {
to: to
}
}
}
}
</script>