【后台之若依】点击菜单新标签页打开路由

若依官网: 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>

Vue.js 是一个流行的前端JavaScript框架,常用于开发单面应用程序(SPA)。在开发后台管理系统的菜单展示以及路由配置和面跳转时,Vue通常与Vue Router一起使用,Vue Router是官方的路由管理器,它和Vue.js的生态系统无缝集成。 首先,你需要安装Vue Router。你可以使用npm或yarn命令来安装: ```bash npm install vue-router # 或者 yarn add vue-router ``` 然后,在你的Vue项目中,你需要定义路由配置。这通常在`src/router/index.js`文件中完成,如下: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' // 引入其他需要的组件... Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, // 配置其他路由和对应的组件... ] const router = new VueRouter({ mode: 'history', // 或者是 'hash' base: process.env.BASE_URL, routes }) export default router ``` 在Vue实例中使用Vue Router: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, // 使用路由 render: h => h(App) }).$mount('#app') ``` 接下来,你可以创建菜单组件,在菜单组件中,你可以使用`<router-link>`标签来创建导航链接,用户点击链接时会进行面跳转: ```html <router-link to="/">首</router-link> <router-link to="/about">关于</router-link> <!-- 其他菜单项 --> ``` 同时,使用`<router-view>`组件来显示匹配的组件内容: ```html <div id="app"> <nav> <!-- 菜单代码 --> </nav> <router-view></router-view> </div> ``` 这样,当用户点击不同的菜单项时,Vue Router会根据配置的路由规则,匹配对应的组件并显示在`<router-view>`中。面之间跳转时,浏览器的URL会改变,以反映当前视图。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宾果的救星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值