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

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

news 2026/2/7 22:20:04

文章目录

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

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31