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

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

news 2026/2/7 23:03:07

文章目录

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

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/5 21:53:01

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2026/1/24 4:39:04

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2026/1/31 7:39:20

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25