用vue3写二级导航

最新推荐文章于 2024-05-28 17:27:23 发布
最新推荐文章于 2024-05-28 17:27:23 发布
阅读量476 收藏 4
点赞数 3
文章标签： vue.js javascript vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50951790/article/details/123589145
版权

模拟的重庆红岩格式和布局

先上效果图

代码如下，图片需要自己导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     *{
         margin: 0;
         padding: 0;
     }
     body{
         width: 1200px;
         height: 80px;
     }
     li{
         list-style-type: none;
     }
     #app>li{
         list-style-type: none;
         float: left;
         text-align: center;
         position: relative;
     }
     #app li a:hover{
         color: #fff;
         background-image: url(./nav.png);
     }
     #app li ul{
         position: absolute;
         top: 80px;
     }
     /* 控制整个移动 */
     #app{
         margin-left: 100px;
         width: 1100px;
         height: 80px;
         margin-top: 150px;
     }
    a{
         text-decoration: none;
         display: block;
         width: 120px;
         height: 80px;
         line-height: 80px;
         border: 1px solid #fff;
         background-color: red;
         border-width: 0 0 0 0;
         color: #fff;
         font-size: 20px;
         font-weight: bold;
     }

    
			.rotation{
				width: 1200px;
				height: 400px;
			}
			.rotation img{
				width: 1290px;
				height: 400px;
                margin-left: -100px;
			}
			.prev,.next{
				height: 50px;
				position: absolute;
				top: 300px;
                margin-top: 100px;
				cursor: pointer;
			}
			.prev{
				left: 0px;
			}
			.next{
				right: 0px;
			}
            #box{
                height: 80px;
                width: 1400px;
                z-index: -2;
                margin-top:0px ;
                position: absolute;
                background-color: red;
            }
            .img4{
               margin-top: -130px;
               position: absolute;
               margin-left: 100px;
           }
           .img3{
               margin-top: -130px;
               position: absolute;
               margin-left: 900px;
           }
           .tel{
            margin-top: -90px;
            position: absolute;
            margin-left: 640px;
            font-size: 10px;
           }
           .serach{
                margin-top: -60px;
                position: absolute;
                margin-left: 1000px;
                font-size: 10px;
                height: 20px;
                width: 100px;
           }
           .button{
                margin-top: -60px;
                position: absolute;
                margin-left: 1105px;
                height: 25px;
                color: #fff;
                background-color: rgb(170, 16, 16);
           }
      [v-clock]{
          display: none;
      }
    </style>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="box"></div>
    <img src="./3.png" class="img3">
    <img src="./4.png" class="img4">
    <p class="tel"style="color: red;">设为首页 | 加入收藏 | 热线：023-65312300（沙坪坝区）023-63303457（渝中片区）| English</p>
    <input type="serach" name="" class="serach" placeholder="请输入搜索关键字">
    <button class="button">搜索</button>
    <div id="app" v-cloak></div>
    <template id="root">
            <li v-for="item in view" @mouseover="item.show=!item.show" @mouseout="item.show=!item.show">
                    <a :href="view.url">
                    {{item.name}}
                    </a>
                <ul v-show="item.show">
                    <li v-for="items in item.view2">
                        <a :href="items.url">
                            {{items.name}}
                        </a>
                    </li>
                </ul>
            </li>

            <input class="prev" type="button" value="<" v-on:click="prev()" />
			<div class="rotation">
				<img :src="imgageName[index]" />
			</div>
			<input class="next" type="button"value=">" v-on:click="next()" />

   </template>
        
    <script>
       Vue.createApp({
            template:`#root`,
            data() {
                return{
                     view:[
                            {name:"首页",url:"#",show:false,view2:[]},
                            {name:"关于红岩",url:"#",show:false,view2:[
                                {name:"红岩文化",url:"#"},
                                {name:"博物馆机构",url:"#"},
                                {name:"历史沿革",url:"#"}
                            ]},
                            {name:"公告动态",url:"#",show:false,view2:[
                                {name:"文博信息",url:"#"},
                                {name:"政务平台",url:"#"},
                                {name:"公告",url:"#"},
                                {name:"专题报道",url:"#"}
                            ]},
                            {name:"馆藏精品",url:"#",show:false,view2:[
                                {name:"一级文物",url:"#"},
                                {name:"二级文物",url:"#"},
                                {name:"三级文物",url:"#"}
                            ]},
                            {name:"陈列展览",url:"#",show:false,view2:[
                                {name:"虚拟展览",url:"#"},
                                {name:"基本陈列",url:"#"},
                                {name:"复原陈列",url:"#"},
                                {name:"临时展览",url:"#"},
                                {name:"展览交流",url:"#"}
                            ]},
                            {name:"研究开发",url:"#",show:false,view2:[
                                {name:"历史研究",url:"#"},
                                {name:"艺术创作",url:"#"},
                                {name:"影音在线",url:"#"},
                                {name:"文创产品",url:"#"}
                            ]},
                            {name:"公共教育",url:"#",show:false,view2:[
                                {name:"党性教育",url:"#"},
                                {name:"爱国主义教育",url:"#"},
                                {name:"研学实践教育",url:"#"},
                                {name:"科普教育",url:"#"}
                            ]},
                            {name:"参观服务",url:"#",show:false,view2:[
                                {name:"景点介绍",url:"#"},
                                {name:"服务内容",url:"#"},
                                {name:"网上预约",url:"#"},
                                {name:"志愿服务",url:"#"}
                            ]},
                            {name:"网上预约",url:"#",show:false,view2:[]},
                        ],
              //引入照片
                imgageName:['./1.jpg','./2.jpg']
                ,index:0
                }
            },

            methods:{
                //调用轮番图变化的函数
					next(){
						this.index++;
						if(this.index >= this.imgageName.length){
							this.index=0;
						}
					},
					prev(){
						this.index--;
						if(this.index < 0){
							this.index=this.imgageName.length-1;
						}
					}
				}

       }).mount('#app')
   </script>
</body>
</html>

万能守恒定律
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue实现二级导航栏效果
10-16
主要为大家详细介绍了vue实现二级导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决vue-router 二级导航默认选中某一选项的问题
10-16
今天小编就为大家分享一篇解决vue-router 二级导航默认选中某一选项的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实现二级导航
조국화
04-21 1063
<!doctype html> 二级菜单(vue)
Vue3+TypeScript项目（中）顶部导航组件
m0_65435970的博客
03-13 722
【代码】Vue3+TypeScript项目（中）顶部导航。
vue实现简单的二级导航目录
LLL_liuhui的博客
07-29 1223
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> <style> a{text-decoration: none;c...
Vue3。 v-if指令使用
JD_00top的博客
12-07 299
{{ content }}
vue二级菜单导航点击选中事件
热门推荐
天空影
04-27 1万+
因为没有使用vue做一个真正完整的项目，所以乘着这个项目比较闲的时间，对标项目用vue做一些页面，丰富自己的项目经验。所以接下来基本都是一些简单的功能。 目标：一级导航点击收缩展开，二级导航点击选中 源码 主要是思路，具体的就不放了 &lt;ul class="sidebar-menu"&gt; &lt;li class="treeNav" v-for="(item,inde...
vue-router二级导航切换路由及高亮显示的实现方法
10-16
主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue二级菜单导航点击选中事件的方法
10-18
今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何实现Vue路由的二级菜单
青春木鱼的博客
08-13 3139
当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。
头部超级菜单导航-鼠标放上去显示二级菜单
07-25
头部超级菜单导航-鼠标放上去显示二级菜单
Vue实现2级3级导航（简单易懂）
编程界明世隐的博客
12-24 1803
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> </style> </head> <body> <div id="app" > <ul id='one'>.
Vue路由的两导航方法总结
xiazeqiang2018的博客
07-31 484
一、&lt;router-link :to=”…”&gt;　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如： // 字符串 &lt;router-link to="apple"&gt; to apple&lt;/router-link&gt; // 对象 &lt;router-link :to="{path:'apple'}"&gt; to apple&lt;/router-l
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 635
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
宝塔部署Java+Vue前后端分离项目
liyh722的博客
05-28 187
宝塔部署Java+Vue前后端分离项目
vue实现附件下载 & 获取到接口的图片，设置宽度100%样式
最新发布
weixin_48596030的博客
05-28 91
vue实现附件下载 & 获取到接口的图片，设置宽度100%样式+++
Vue 怎么定义插件以及使用这个插件
u010373106的博客
05-22 292
Vue.js插件是一种增强Vue功能的方式，它允许你向Vue中添加全局功能，比如全局方法、指令、过滤器、混入等。
Python案例题目，入门小白题
Love_Ban的博客
05-22 817
辅助新入门的Python小白，更深一步提高对python的理解
vue3项目二级路由如何实现
07-17
在Vue 3中实现二级路由非常简单。你可以使用Vue Router来管理你的路由。下面是一个简单的示例，展示如何实现二级路由： 首先，安装Vue Router： ``` npm install vue-router@4 ``` 然后，在你的项目中创建一个router.js文件，并添加以下代码： ```javascript import { createRouter, createWebHistory } from 'vue-router'; // 导入你的组件 import Home from './components/Home.vue'; import About from './components/About.vue'; import Contact from './components/Contact.vue'; import Subpage from './components/Subpage.vue'; const routes = [ { path: '/', component: Home, }, { path: '/about', component: About, }, { path: '/contact', component: Contact, }, { path: '/subpage', component: Subpage, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 在上面的代码中，我们导入了需要使用的组件，并定义了路由的路径和对应的组件。 接下来，在你的main.js文件中，导入router.js，并将它添加到Vue实例中： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 现在，你可以在App.vue文件中添加一个路由出口，用于显示不同路径对应的组件： ```html <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后，你可以在App.vue中的导航栏或其他组件中添加链接，以便在不同的路径之间进行导航： ```html <template> <nav> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> <router-link to="/subpage">Subpage</router-link> </nav> </template> ``` 现在，当你访问不同的路径时，对应的组件将会被加载并显示在页面上。 希望这可以帮助到你实现Vue 3中的二级路由！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值