首页 > 其他分享 >VUE+Element+若依随笔001:点击左侧菜单跳转外部链接配置并传参数

VUE+Element+若依随笔001:点击左侧菜单跳转外部链接配置并传参数

时间:2023-02-21 19:45:19浏览次数:40  
标签:baidu VUE return linkProps 001 菜单 跳转 com

一、后台菜单配置部分:
1、菜单管理中:新增父级目录
2、配置内容:
菜单名称:测试用菜单
菜单路径:https://www.baidu.com/ 此处需要配置要跳转你的外部链接
组件名称:testMenu
组件路径:Layout
一级菜单跳转地址:不用填
图标地址:根据需求填写
排序值:根据需求填写
权限类型:默认菜单就行
3、点击保存。

 

二、VUE代码部分:
1、Vue程序中,找到src/layout/components/Sidebar/Link.vue ---有可能是别的名称。
2、methods中找到linkProps方法
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
return {
to: to
}
}
linkProps方法进入后,会判断传入的字符串to是否以http为开头。
是的话则为外部链接,不是的则是内部路由跳转。
如果需要添加参数,我们可以在判断中,拼接到to后面,修改后如下
if (this.isExternal) {
if(to == 'https://www.baidu.com/'){
to = 'https://www.baidu.com/?name=' + 'name' + '&password=' + 'password'
}
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}

该方法传参若担心安全问题,可以转码后再拼接到to中,

编码:
encodeURIComponent('http://baidu.com/adbg') // 结果http%3A%2F%2Fbaidu.com%2Fadbg
解码:
decodeuRIComponent('http%3A%2F%2Fbaidu.com%2Fadbg') // 结果http://baidu.com/adbg

 

若有更好的传参方法请留言~~~

 

标签:baidu,VUE,return,linkProps,001,菜单,跳转,com
From: https://www.cnblogs.com/0328dongbin/p/17142163.html

相关文章

  • Vue 07
    Vue当我们下载了其他人的vue,是没有依赖的,这是我们需要执行下面这句: cnpminstall就会将我们需要的项目的依赖都安装上。#做成纯净的vue项目 -在router的index.js中......
  • Vue插件plugins以及ui插件的使用
    Vue插件plugins以及ui插件的使用插件的使用结构我们可以在src文件夹下新建plugins包,在内部写js代码插件,如plugins/index.js,插件的作用就是将涉及Vue实例对象的js代码分离......
  • vscode中html和vue没有自动补全,需要怎么配置
    先安装HTML Snippets插件 点击 文件-首选项-设置,然后根据以下操作  然后在setting.json中加入以下代码  "files.associations":{"*.vue":"htm......
  • POJ 1001 Exponentiation 字符串乘法+快速求幂
    考虑一下下面的样例应该可以AC:底数整数的情况去掉最后后导零没有小数部分时候不输出小数点思路先不考虑小数点将数存入字符串a,b中答案存入retret的长度是a的长......
  • vue usePop弹窗控制器
    当UI库弹窗无法满足自定义需求时,需要我们自己开发简单的弹窗组件。弹窗组件与普通业务组件开发没有太大区别,重点在多弹窗之间的关系控制。例如:弹窗1,弹窗2由于触发时......
  • vue_element打印
    https://blog.csdn.net/Tom_sensen/article/details/111171934安装npminstallvue-print-nb--save 在main.js文件中注册importPrintfrom'vue-print-nb' Vue.......
  • vue开发大屏项目屏幕适配问题解决方案
    1.新建自定义指令文件如下: 2.文件中插入一下代码:import{App,Directive,DirectiveBinding,nextTick}from'vue'import{throttle}from'lodash-es'import......
  • 1 props其他、 2 混入mixin 、3 插件、 4 elementui使用(重点) 、5 vuex 、6 vue Rout
    目录1props其他2混入mixin3插件4elementui使用(重点)5vuex6vueRouter7localStorage系列1props其他#安装依赖 cnpminstall#做成纯净的vue项目 -在router......
  • vue2 day7
    昨日回顾#1nodejs后端语言---》js语法---》node,npm命令 -npm命令下载模块慢-淘宝的cnpm,以后使用npm的地方都可以使用cnpm#2安装vue-cli创建项目 -vue项目的......
  • Vue全套教程
     1、初识Vuejs1.1、为什么学习Vuejs?可能你的公司正要用Vue将原项目重构可能你的公司新项目决定使用Vue技术栈可能你正在找工作,会发现十个前端八个对Vue有或多或少的要求......