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

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

news 2026/3/29 6:12:28

文章目录

前言
一、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 导航菜单是什么？

二、使用方式

1.代码如下

2.页面效果

总结

相关文章：

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

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

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

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

磁盘分区和挂载

电子技术——晶体管尺寸

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

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

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

shutil.copyfile PermissionError: [Errno 13] Permission denied

07react+echart，大屏代码开发

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

Cadence Allegro 导出Component Pin Report详解

PAT甲级 1110 Complete Binary Tree

【JavaSE】逻辑控制语句

Motionbuilder系统文件说明

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

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

Spark Catalyst

element 远程搜索下拉加载

Comsol模拟混凝土中水分传递低气压下水分转移引起的水泥浆龄期微观结构变化低气压（AP）...

OpenClaw备份策略：nanobot镜像的模型权重与技能配置定期同步

基于Matlab的模拟射击自动报靶系统：带你走进靶场黑科技

开关电源环路补偿：单个极点与零点的实战配置与拓扑适配

BongoCat：让桌面交互充满生命力的开源伴侣

南北阁Nanbeige 4.1-3B实现数据库课程设计自动化

YOLO11 vs YOLOv8 实测对比：在自定义数据集上，精度和速度到底提升了多少？

DmtrPots电位器库：嵌入式模拟输入抗抖动与高鲁棒处理方案

如何在Python中处理大型数据集

新手也能上手！盘点2026年最受喜爱的的降AIGC网站