vue 小白初次实践踩坑(二)-路由与location

el/2024/2/25 23:59:46

vue 小白初次实践踩坑(二)-路由与location

需求:

第一种:要求点击不同的导航跳转到另一个页面,在另一个页面上也有通用的导航,刚刚点击的那个导航应该处于选中状态(高亮)

<template><div><ul class="header-menu" ref="MainHeader" @mouseleave="handleLeaveMainHeader"><li v-for="(item,index) in nav_data" :key="index" :id="item.id" :class="{active:index === activeIndex}" @mouseenter="setCurrentNav(index)"><a :href="item.url" target="_blank">{{item.name}}</a></li><span class="nav-underline" :style="currentNavStyle" style="opacity: 0;" ref="bar"></span></ul></div>
</template><script>export default{name:'RpNavHead',data() {return {activeNav:1,currentNavStyle:{width:'0',left:'0'},nav_data:[{id:'navWorkbench',name:'工作台',url:'//hc.hanmaker.com/app_common/index.php?m=workbench&a=index',},{id:'navWorkReport',name:'工作报告',url:'//okr.hanmaker.com/#/myreport/wrtreport?source=1',},{id:'navApproval',name:'审批流程',

http://www.ngui.cc/el/4893945.html

相关文章

vue + element 新手指引

直接上代码 template-(Guide.vue) <template><div><!-- 新手指引 --><div id"mask"></div><div id"searchTip"><div class"stepA"><el-button type"primary" size"small" c…

vue+element 表头说明文字

vueelement 表头说明文字 第一种直接hover 表头出现说明文字 html&#xff1a; <el-table-column prop"last_result" label"上次评估结果" width"120" :render-header"renderHeader"></el-table-column>js: methods: …

jquery封装选人插件(结合layer)

html <button class="layui-btn" id="transfer">添加</button><!-- 选人弹窗主体框架 satrt--> <div class="layer-transfer" id="layer-transfer" style="display:none"><div class="lay…

element表格点击一行给行添加border

由于element ui有一套自己的样式&#xff0c;在实际工作中&#xff0c;我们可能不会照搬&#xff0c;一般会根据需求和设计对element ui进行调整&#xff0c;但是有时候自己写的样式会被element ui影响&#xff0c;不能成功应用。 这次我的工作就是给element表格点击一行给行添…

layui 布局 高度不一致时导致的错乱问题解决

这个问题找了很久&#xff0c;因为需求是要类似于瀑布流那样的布局&#xff0c;但是因为用的是layui所以又不想弃用&#xff0c;单独写&#xff0c;所以有了以下解决方案&#xff1a; html&#xff1a; <div class"layui-row list-body"><div class"…

超简单的jquery 点击文本复制文本

有点仿蓝湖的点击代码就复制的功能&#xff0c;直接点击你想复制的文本&#xff0c;就可以复制成功了 html: <ul class"info-list"><li><div class"info"><em>1</em><span class"link-addr"title"12333…

vue 不在同一处(不是同一个页面)的数据使用(数据传输)

vue 不在同一处&#xff08;不是同一个页面&#xff09;的数据使用&#xff08;数据传输&#xff09; 整理下最近在做vue项目时遇到的几个关于数据传输的问题&#xff1a; 有的时候我们在同一个页面想要调用不同的组件&#xff0c;不同的组件可能只是结构不太一样&#xff0c;…

vue + element(前后端) 学习总结(一)

准备工作 工具安装和环境搭建 ## node.js## npm## mongodb数据库 主要记录一下mongodb的安装和配置(mac版) ## 首先去mongodb的官网下载&#xff1a;[https://www.mongodb.com/download-center] ## 下载解压后重命名为mongodb,接着打开mongodb&#xff0c;在mongodb下新建一个…

vue + element(前后端) 学习总结 (二)

初始化项目 admin&#xff08;管理端&#xff09; server &#xff08;服务端&#xff09; web &#xff08;移动端&#xff09; 在项目文件下&#xff08;demo_project&#xff09;新建各端项目文件 在demo_project文件路径下&#xff0c;输入命令&#xff1a;mkdir serv…

vue + element(前后端) 学习总结 (三)

后台管理界面的搭建 cd admin 进入后台管理项目路径下 npm run serve 启动项目 vue add element 安装element-ui vue add router 安装路由 去element 官网 找到后台管理界面 复制代码 在admin > src > views > 新建Main.vue文件 粘贴element代码 在router.js 里…