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

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

news 2026/5/14 5:44:19

文章目录

  • 前言
  • 一、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

【花雕学编程】Arduino动手做（252）---ESP32S3矩阵Matrix开发板之搭建开发环境

37款传感器与模块的提法，在网络上广泛流传，其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块，依照实践出真知（一定要动手做）的理念，以学习和交流为目的，这里准备逐一动手试试多做实验，不管成功与否，都会记录下来——小小的…...

编程新知 2026/5/14 4:59:15

爱搜索 GEO 营销系统实效展示与能力验证

在当前的数字营销环境中&#xff0c;许多企业发现传统的 SEO 手段在应对 AI 驱动的搜索场景时显得力不从心。当潜在客户向大模型提问“哪家装修公司更靠谱”或“推荐几家铝板输送机厂家”时&#xff0c;如果品牌未能出现在 AI 生成的答案中&#xff0c;就意味着失去了最精准的流…...

编程新知 2026/5/14 4:44:36

MFC深入-MFC和win32

MFC和Win32 MFC Object和Windows Object的关系 MFC中最重要的封装是对Win32 API的封装&#xff0c;因此&#xff0c;理解Windows Object和MFC Object (C对象&#xff0c;一个C类的实例)之间的关系是理解MFC的关键之一。所谓Windows Object&#xff08;Windows对象&#xff09;是…...

编程新知 2026/5/14 4:28:24

创业沟通陷阱：从“一切顺利”到“坦诚求助”的工程化实践

1. 项目概述&#xff1a;当“独角兽”闭上嘴&#xff0c;“彩虹”褪了色在科技创业圈混了十几年&#xff0c;从硅谷到深圳&#xff0c;从硬件孵化器到软件路演日&#xff0c;我见过太多这样的场景。你走进一个挤满创业者的房间&#xff0c;空气里弥漫着咖啡因和焦虑混合的独特气…...

编程新知 2026/5/14 2:19:51

ARM架构自托管调试与追踪技术详解

1. ARM架构自托管调试与追踪技术概述在嵌入式系统开发领域&#xff0c;调试技术始终是开发者面临的核心挑战之一。传统JTAG调试方式虽然功能强大&#xff0c;但在生产环境或安全敏感场景中存在明显局限。ARM架构提供的自托管调试(Self-hosted Debug)和追踪(Trace)机制&#xff…...

编程新知 2026/5/14 1:53:48

ToDesk、向日葵、UU远程横评：谁才是2026国产远控首

ToDesk、向日葵、UU远程横评&#xff1a;谁才是2026国产远控首选一、前言&#xff1a;国产远控崛起&#xff0c;2026 怎么选&#xff1f;远程控制早已从 “小众工具” 变成个人、办公、游戏、运维的刚需。2026 年国产远控阵营已全面崛起&#xff0c;ToDesk、向日葵、UU 远程成为…...

编程新知 2026/5/14 1:06:53

[特殊字符] 科普：论文查重的AI原理是什么？这个免费工具把“黑科技“讲明白了

同学们好&#xff0c;我是你们的论文写作科普博主。 今天不聊怎么选题&#xff0c;不聊怎么写文献综述&#xff0c;咱们来聊一个99%的同学都踩过坑的环节——查重。 先问大家一个问题&#xff1a;你知道查重到底是怎么查的吗&#xff1f; 很多同学以为查重就是"把你的文…...

编程新知 2026/5/13 23:02:22

HC32F460_ADC驱动（二）

2 ADC工作的核心要素2.1 采样保持一般来说采样保持电路&#xff08;S/H&#xff09;是ADC转换的前端电路。由于模拟信号是时刻连续变化的&#xff0c;若转换过程中输入电压持续波动会导致转换结果失真。采样保持电路的核心作用是在ADC启动转换后保持输入信号不变&#xff0c;保…...

编程新知 2026/5/13 21:31:09

JPlag：17种编程语言的代码抄袭检测利器，如何精准识别学术不端与代码剽窃？

JPlag&#xff1a;17种编程语言的代码抄袭检测利器&#xff0c;如何精准识别学术不端与代码剽窃&#xff1f; 【免费下载链接】JPlag State-of-the-Art Source Code Plagiarism & Collusion Detection. Check for plagiarism in a set of programs. 项目地址: https://gi…...

编程新知 2026/5/13 20:29:56

Vue.Draggable终极指南：掌握拖拽数据同步的5大核心策略

Vue.Draggable终极指南&#xff1a;掌握拖拽数据同步的5大核心策略 【免费下载链接】Vue.Draggable Vue drag-and-drop component based on Sortable.js 项目地址: https://gitcode.com/gh_mirrors/vu/Vue.Draggable Vue.Draggable是一个基于Sortable.js的强大Vue.js拖拽…...

编程新知 2026/5/13 20:01:07