当前位置： 首页 > news >正文

vue router elementui template CDN模式实现多个页面跳转

news 2026/3/28 20:19:18

文章目录

  • 前言
  • 一、elementui Tabs标签页和NavMenu 导航菜单是什么？
  • 二、使用方式
    • 1.代码如下
    • 2.页面效果
  • 总结

前言

写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里，为了写更少的代码还有看起来更简洁做了许多偷懒操作，比如用elementui 的Tabs标签页当NavMenu 导航菜单用，虽然效果上看起来差不多，但是导航菜单功能更强大，也更能体现出CDN模式下vue的router、templete的挂载状态，这样才能更好的学习vue、vue-router，开发页面较少的项目时还可以用这种方式少写很多代码。当然，也是为了以后用起vue来更顺手。

一、elementui Tabs标签页和NavMenu 导航菜单是什么？

官方文档：https://element.eleme.cn/#/zh-CN/component/menu
111

二、使用方式

1.代码如下

就这一个页面

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"><router-view></router-view>
</div>
</body>
<template id="sign"><div class="handle"><div class="handle-input"><el-button @click="login" plain>登录</el-button></div></div>
</template>
<template id="manager"><div><el-menu:default-active="this.$router.path"class="el-menu-demo"mode="horizontal"router@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/manager/manager1">用户管理</el-menu-item><el-menu-item index="/manager/manager2">角色管理</el-menu-item><el-menu-item index="/manager/manager3">权限管理</el-menu-item></el-menu><router-view></router-view></div>
</template>
<template id="manager1"><span>模板1：用户管理</span>
</template>
<template id="manager2"><span>模板2：角色管理</span>
</template>
<template id="manager3"><span>模板3：权限管理</span>
</template><!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import Router -->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script>const Sign = {props: ['todo'],template: '#sign',data() {return {username: ''}},methods: {login() {this.$router.push({name: 'manager',params: {}});}},mounted() {console.log('组件Sign被挂载了');}};const Manager = {props: ['todo'],template: '#manager',data() {return {activeIndex: '1'}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}},mounted() {console.log('组件Manager被挂载了');},created() {}};const Manager1 = {props: ['todo'],template: '#manager1',data() {return {token: ''}},methods: {},mounted() {console.log('组件Manager1被挂载了');},created() {}};const Manager2 = {props: ['todo'],template: '#manager2',data() {return {token: ''}},methods: {},mounted() {console.log('组件Manager2被挂载了');},created() {}};const Manager3 = {props: ['todo'],template: '#manager3',data() {return {token: ''}},methods: {},mounted() {console.log('组件Manager3被挂载了');},created() {}};const router = new VueRouter({routes:[{path: '/',name: 'sign',component: Sign},{path: '/manager',name: 'manager',component: Manager,children:[{path: 'manager1',component: Manager1},{path: 'manager2',component: Manager2},{path: 'manager3',component: Manager3}]}]});new Vue({router,el: '#app',data: {},methods: {}});
</script>
<style>.handle {position: absolute;width: 100%;height: 100%;top: 0;left: 0;margin: 0;background-image: url(banner.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;overflow: hidden;display: flex;justify-content: center;align-items: center;}.handle-input {display: flex;flex-direction: column;}
</style>
</html>

2.页面效果

222

总结

这回贴的代码简洁明了了，没啥好总结的。哦，还有，如果标签页还需要携带参数的话可以参考这篇文章https://blog.csdn.net/qq_40197100/article/details/111587781 ，或者在el-menu-item标签里写个@click事件直接调路由。

相关文章：

vue router elementui template CDN模式实现多个页面跳转

文章目录前言一、elementui Tabs标签页和NavMenu 导航菜单是什么&#xff1f;二、使用方式1.代码如下2.页面效果总结前言 写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里&#xff0c;为了写更少的代码…...

编程日记 2023/5/7 11:02:09

ElasticSearch - ElasticSearch基本概念及集群内部原理

文章目录1. ElasticSearch的应用场景01. Elasticsearch 是什么&#xff1f;02. 为何使用 Elasticsearch&#xff1f;03. Elasticsearch 的用途是什么&#xff1f;04. Elasticsearch 的工作原理是什么&#xff1f;05. Elasticsearch 索引是什么&#xff1f;06. Logstash 的用途是…...

编程日记 2023/5/7 11:02:08

【反射中，Class.forName和ClassLoader区别】

在Java中&#xff0c;可以使用反射机制来获取类的信息并动态地创建对象。其中&#xff0c;Class是Java反射机制中的重要类&#xff0c;表示一个类的信息。 Class.forName()和ClassLoader都可以用于获取类的Class对象&#xff0c;但它们之间存在一些差别&#xff1a; 1、是否会…...

编程日记 2023/5/6 19:16:48

2023了为什么还有人在问：女生适合做跨境电商吗？

女生适合做跨境电商吗&#xff1f;这是东哥最近咨询里面问最多的&#xff0c;今天东哥就给大家解答一下你们内心的疑惑&#xff0c;虽然代表的是东哥我自己的观点&#xff0c;但我觉得还是很值得深思的。 女生适合做跨境电商吗&#xff1f; 性别并不是决定一个人是否适合从事跨…...

编程日记 2023/5/6 17:41:09

磁盘分区和挂载

磁盘分区和挂载一、linux分区1.原理介绍2.分区和文件关系示意图&#xff1a;3.硬盘说明二、linux分区1.查看所有设备挂载情况三、挂载案例1.使用lsblk命令查看2. 虚拟机硬盘分区3.虚拟机硬盘分区格式化4.mount挂载 重启挂载失效4.1挂载名词解释4.2注意事项4.3挂载4.4挂载非空目…...

编程日记 2023/5/7 11:02:06

电子技术——晶体管尺寸

电子技术——晶体管尺寸 在本节我们介绍关于IC设计的一个重要的参数晶体管尺寸&#xff08;例如长度和长宽比&#xff09;。我们首先考虑MOS反相器。 反相器尺寸 为了说明 (W/L)(W/L)(W/L) 的尺寸大小以及 (W/L)p(W/L)_p(W/L)p​ 和 (W/L)n(W/L)_n(W/L)n​ 的比例问题对于MO…...

编程日记 2023/5/7 11:02:04

Tuxera NTFS2023MacOS读写软件功能介绍使用

当我们遇到磁盘不能正常使用的情况时本能的会以为是磁盘损坏了&#xff0c;但某些情况下却并非如此。对于mac操作系统来说&#xff0c;软件无法使用设备无法正常读写似乎是很常见的事&#xff0c;毕竟现在的mac电脑对PC机上的产品无法完全适应使用&#xff0c;经常会存在兼容方…...

编程日记 2023/5/7 11:02:02

2022年数维杯国际大学生数学建模挑战赛A题自动地震地平线跟踪解题全过程论文及程序

2022年数维杯国际大学生数学建模挑战赛 A题 自动地震地平线跟踪 原题再现&#xff1a; 随着我国经济社会发展&#xff0c;地质工作的重要性也日益提高。地震资料解释是地震勘探工程的一个重要阶段&#xff0c;可以明确油气勘探的地下构造特征&#xff0c;为油气勘探提供良好和…...

编程日记 2023/5/7 11:02:00

推荐系统[八]：推荐系统常遇到问题和解决方案[物品冷启动问题、多目标平衡问题、数据实时性问题等]

相关文章推荐： 推荐系统[一]：超详细知识介绍，一份完整的入门指南，解答推荐系统相关算法流程、衡量指标和应用，以及如何使用jieba分词库进行相似推荐，业界广告推荐技术最新进展 推荐系统[二]：召回算法超详细讲解[召回模型演化过程、召回模型主流常见算法(DeepMF/TDM/Ai…...

编程日记 2023/5/7 11:01:59

shutil.copyfile PermissionError: [Errno 13] Permission denied

File "G:/od15/调试/翻译文件更换/更新翻译po文件.py", line 42, in <module> shutil.copyfile(gxpath,dir_file_path) File "E:\odsoft\python\lib\shutil.py", line 120, in copyfile with open(src, rb) as fsrc: PermissionError: [Er…...

编程日记 2023/5/7 11:01:57

07react+echart，大屏代码开发

react框架引入第三方插件原链接gitHub:GitHub - hustcc/echarts-for-react: ⛳ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。import ReactECharts from echarts-for-react;import * as echarts from echarts;一、软件简介echarts-…...

编程日记 2023/5/7 11:01:55

【数据库原理复习】ch2 SQL语句（主要基于sql server）

这里写目录标题基本知识常用基本数据类型字符型数据类型二进制数据类型日期类型数字类型约束条件表SQL语句创建语句修改基本表 & 删除基本表数据查询基本知识 常用基本数据类型 字符型数据类型 名称大小说明char(n)占n个字节只能显示英文字符nchar(n)2n字节2字节额外开销…...

编程日记 2023/5/7 11:01:54

Cadence Allegro 导出Component Pin Report详解

⏪《上一篇》   🏡《上级目录》   ⏩《下一篇》 目录 1，概述2，Component Pin Report作用3，Component Pin Report示例4，Component Pin Report导出方法4.1，方法14.2，方法2B站关注“硬小二”浏览更多演示视频 1，概述...

编程日记 2023/5/7 11:01:52

PAT甲级 1110 Complete Binary Tree

题目链接 PAT甲级 1110 Complete Binary Tree 思路 第一次的写法不是很好。 对于这种完全二叉树的层序遍历&#xff0c;比较烦人的就是空孩子使得处理很麻烦。 思来想去还是把空位置也入队比较好。 这样的话&#xff0c;访问到空指针的时机被推迟了一个level 而完全二叉树的…...

编程日记 2023/5/7 11:01:50

【JavaSE】逻辑控制语句

文章目录一. 顺序结构二. 分支结构1. if 语句2. switch 语句3、循环结构3.1 while 循环3.2 do while 循环3.3 for 循环3.4 break 和 continue三. 输入输出1. 输出到控制台2. 从键盘输入一. 顺序结构 顺序结构比较简单&#xff0c;即程序按照代码书写的顺序一行一行执行下去。 …...

编程日记 2023/5/7 11:01:49

Motionbuilder系统文件说明

安装路径 Motionbuilder 默认的安装路径在 C:\Program Files\Autodesk\MotionBuilder\ 用户数据(user data) 位于安装路径下的 bin\config 非管理员用户的配置文件路径 Motionbuilder会将配置文件备份到 \Users[user]\AppData\Local\Autodesk[MotionBuilder] 当用户第一次打开…...

编程日记 2023/5/7 11:01:47

【我的Android开发】AMS中Activity栈管理

概述 Activity栈管理是AMS的另一个重要功能&#xff0c;栈管理又和Activity的启动模式和startActivity时所设置的Flag息息相关&#xff0c;Activity栈管理的主要处理逻辑是在ActivityStarter#startActivityUnchecked方法中&#xff0c;本文也会围绕着这个方法进进出出&#xf…...

编程日记 2023/5/7 15:28:56

C++源程序的构成————学习笔记

以下内容为&#xff0c;在学校上课时的课堂总结&#xff0c;偶尔我也会扩展一些内容内容仅供参考&#xff0c;欢迎大佬的指正简单的C程序#include <iostream> using namespace std;int main() {int x0;int y 0;cout << "请输入x,y的值"<<endl;cin…...

编程日记 2023/5/7 15:28:47

Spark Catalyst

Spark Catalyst逻辑计划逻辑计划解析逻辑计划优化Catalyst 规则优化过程物理计划Spark PlanJoinSelection生成 Physical PlanEnsureRequirementsSpark SQL 端到端的优化流程&#xff1a; Catalyst 优化器 : 包含逻辑优化/物理优化Tungsten : Spark SQL的优化过程 : 逻辑计划 …...

编程日记 2023/5/7 15:28:44

element 远程搜索下拉加载

created() { this.getList(); this.getGroupList(); }, directives: { /** 下拉框懒加载 */ “el-select-loadmore”: { bind(el, binding) { const SELECTWRAP_DOM el.querySelector( “.el-select-dropdown .el-select-dropdown__wrap” ); SELECTWRAP_DOM.addEventListener…...

编程日记 2023/5/7 15:28:41

终极窗口置顶解决方案：如何用AlwaysOnTop告别窗口切换烦恼

终极窗口置顶解决方案&#xff1a;如何用AlwaysOnTop告别窗口切换烦恼 【免费下载链接】AlwaysOnTop Make a Windows application always run on top 项目地址: https://gitcode.com/gh_mirrors/al/AlwaysOnTop 你是否曾因频繁切换窗口而打断工作流&#xff1f;是否在多…...

编程新知 2026/3/28 20:07:12

别再只抄代码了！手把手教你调试YOLOv5模型输出，彻底搞懂每个数字的含义

从黑盒到白盒&#xff1a;YOLOv5模型输出调试实战指南 在计算机视觉领域&#xff0c;YOLOv5无疑是最受欢迎的实时目标检测框架之一。但许多开发者在使用过程中&#xff0c;往往只停留在"复制粘贴后处理代码"的阶段&#xff0c;对模型输出的具体含义一知半解。当需要将…...

编程新知 2026/3/28 19:14:52

从DBC到CAPL全流程避坑指南：BusType设置对自动化测试的影响

从DBC到CAPL全流程避坑指南&#xff1a;BusType设置对自动化测试的影响 在汽车电子测试领域&#xff0c;DBC文件如同CAN网络的"基因图谱"&#xff0c;而CAPL脚本则是激活这些基因的"酶"。当两者配合出现问题时&#xff0c;往往不是基因突变&#xff0c;而是…...

编程新知 2026/3/28 18:14:18

PDFMathTranslate深度解析：基于ONNX推理引擎的学术论文翻译技术评测

PDFMathTranslate深度解析&#xff1a;基于ONNX推理引擎的学术论文翻译技术评测 【免费下载链接】PDFMathTranslate PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译&#xff0c;支持 Google/DeepL/Ollama/OpenAI 等服…...

编程新知 2026/3/28 18:06:16

罗氏线圈COMSOL建模与电磁模拟仿真

罗氏线圈comsol建模&#xff0c;电磁模拟仿真罗氏线圈这玩意儿在电磁测量里算是老演员了&#xff0c;今天咱们用COMSOL给它整活建模。先别急着开软件&#xff0c;核心思路得理清楚——这空心环状结构本质上就是个积分器&#xff0c;靠的是交变磁场在环形路径上感应出的电动势。…...

编程新知 2026/3/28 18:00:15

SD2.0时钟与时序：从基础模式到高速传输的实战解析

1. SD2.0时钟与时序基础入门 第一次接触SD2.0规范时&#xff0c;我也被那些密密麻麻的时序参数搞得头晕眼花。直到在项目里实际调试SD卡读写失败的问题后&#xff0c;才发现理解时钟和时序的配合有多重要。简单来说&#xff0c;时钟就像两个人对话的节奏&#xff0c;而时序则是…...

编程新知 2026/3/28 17:46:01

腾讯云/阿里云服务器上，用娃娃一键端30分钟搞定DNF私服（附端口安全组避坑指南）

腾讯云/阿里云30分钟极速部署DNF私服全攻略&#xff1a;从安全组配置到五国启动 最近在游戏开发者社区里&#xff0c;不少朋友都在讨论如何在云服务器上快速搭建DNF私服体验服。作为一名长期混迹于各类游戏私服搭建的老玩家&#xff0c;我发现大多数教程要么过于专业化&#xf…...

编程新知 2026/3/28 15:53:04

基于模型参考自适应的永磁同步电机参数辨识仿真模型探索

基于模型参考自适应的永磁同步电机参数辨识仿真模型 具有电阻、电感辨识&#xff0c;且精度分别在99.9%左右 参考文献&#xff1a;附带搭建仿真过程的参考文献&#xff0c;如图在永磁同步电机&#xff08;PMSM&#xff09;的研究与应用中&#xff0c;准确的参数辨识至关重要。今…...

编程新知 2026/3/28 15:51:04

Jetson AGX Orin避坑指南：从换源到编译Torchvision，我踩过的那些ARM架构的‘坑’

Jetson AGX Orin避坑实战&#xff1a;ARM架构下的深度学习环境搭建血泪史 第一次把Jetson AGX Orin拿到手时&#xff0c;我天真地以为这不过是一台"加强版树莓派"。直到连续三天被各种404 Not Found、Illegal instruction (core dumped)和No matching distribution f…...

编程新知 2026/3/28 14:16:37

Compiler Explorer安全防护终极指南：7个关键步骤保护你的编译环境

Compiler Explorer安全防护终极指南&#xff1a;7个关键步骤保护你的编译环境 【免费下载链接】compiler-explorer Run compilers interactively from your web browser and interact with the assembly 项目地址: https://gitcode.com/gh_mirrors/co/compiler-explorer …...

编程新知 2026/3/28 13:08:06