Vue实现左侧导航栏和右侧标签页功能

最新推荐文章于 2025-05-17 11:14:41 发布
最新推荐文章于 2025-05-17 11:14:41 发布
阅读量1.5k 收藏
点赞数
文章标签： vue.js 前端 javascript 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/git_web425/article/details/133548798
版权
编程 专栏收录该内容
287 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍如何使用Vue和Vue Router创建一个具有左侧导航栏和右侧标签页的应用。通过创建组件、定义路由规则，实现了点击导航菜单项时在右侧显示相应内容的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue是一种流行的JavaScript框架，它提供了一种简单而灵活的方式来构建用户界面。在这篇文章中，我们将探讨如何使用Vue实现一个左侧导航栏和右侧标签页功能的示例。

介绍

左侧导航栏和右侧标签页是一种常见的布局方式，适用于许多应用程序，如管理后台、电子商务平台等。左侧导航栏用于显示主要导航菜单，而右侧标签页则用于显示对应导航项的详细内容。

在本示例中，我们将使用Vue实现一个简单的左侧导航栏和右侧标签页布局。点击左侧导航菜单项时，会在右侧标签页中显示对应的内容。

准备工作

首先，确保你已经安装了Vue和Vue Router。你可以通过使用npm或yarn来安装它们：

npm install vue vue-router

或

yarn add vue vue-router

创建Vue应用程序

在开始之前࿰

了解本专栏 订阅专栏 解锁全文
vue3:十一、主页面布局(实现基本左侧菜单+右侧内容效果)
weixin_46001736的博客
03-22 1588
vue3:十一、主页面布局(实现基本左侧菜单+右侧内容效果)
vuek框架结构设计及左侧菜单右侧内容显示
08-16
环境配置 Node 下载地址http://nodejs.cn/ 安装文件下有一个绿色的图片交node.exe 点击运行 输入node -v进行检测是否安装成功 使用vue-cli(脚手架)搭建项目 vue-cli是vue官方提供的用域搭建基于vue+webpack_es6项目的脚手架工具 在线文档：https://github.com/vuejs/vue-cli 操作： 1.npm install -g vue-cli：全局下载工具 2.vue init webpack 项目名：下载基于webpack模板项目 3.cd 项目名：进入项目目录 4.npm install :下载项目依赖的所有模块 5.npm run dev ：运行项目 6.访问项目：localhost:8080 项目目录结构 src assets:存放照片、css、js css js img components:存放组件 lib：存放模拟数据 router:配置路由 store:存放vuex vuex的安装：cd x项目目录 cnpm install vuex --save views:存放所有单页面 配置访问端口号： 根目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js dev: { env: require('./dev.env'), port: 8092, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, } 项目目录下：https://blog.csdn.net/weixin_39378691/article/details/83784403 1.安装elementUI：cd进入项目根目录，npm i element-ui -S 2.引入elementUI组件（main.js文件中） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element, { size: 'small' }) 项目目录下：https://blog.csdn.net/weixin_41432849/article/details/81988058 1.安装jquery：cd进入项目根目录， npm install jquery --save 2.在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行； const webpack = require('webpack') 3.在module.exports的最后加入 , plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", jquery:"jquery", "window.jQuery":"jquery" }) ]
Vue实现左右菜单联动实现（更新）
weixin_34416754的博客
08-11 4476
title: Vue实现左右菜单联动实现 date: 2018-08-11 16:31:34 tags: Vue 左右联动 top: 100 copyright: true 知乎 个人博客 Github 源码传送门：Rain120/vue-study 根据掘金评论需求，更新了数据接口并修复了一些问题 之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联...
vue配置子路由，实现点击左侧菜单，内容区域显示不同的内容
最新发布
运维@小兵的博客
05-17 269
vue配置子路由，实现点击左侧菜单，内容区域显示不同的内容
Vue实现左边导航栏，右边显示对应内容
Otto的学习笔记
05-03 1万+
使用嵌套路由实现 这里重点要注意使用<router-view></router-view> ，路由出口, 路由匹配到的组件将渲染在这里 导航栏代码userInfo.vue： <template> <el-row type="flex" justify="center" :gutter="8"> <el-col v-if="user" :span="20"> <el-col :span="4">
【Vue前端】左侧菜单，右侧内容的网站界面
TZN00的博客
10-29 3929
本项目由Vue+Element UI制作。 这是一种常见的网站内容排列风格， 左侧为菜单区域，可以选择所需要的功能， 而右侧大部分为内容区域，顶部则放置一些重要、常用的功能和信息。
vue 实现左边导航栏且右边显示具体内容
☆夏の独憶☆
01-21 5177
vue 实现左边导航栏且右边显示具体内容 1.在el-menu-item里面写红框里面的内容 2.在methods里面写跳转 3.在router文件下面的index.js写入路由 4.在home.vue下面引入router-view路由占位符
vue.js实现左边导航切换右边内容
01-19
本文实例为大家分享了vue.js左边导航切换右边内容的具体代码，供大家参考，具体内容如下 <li v-for=
Vue实现导航栏点击当前标签变色功能
10-16
在Vue中实现导航栏点击当前标签变色的功能，主要涉及到以下几个知识点： 1. Vue的响应式数据绑定：Vue.js的核心特性之一是基于依赖追踪的响应式系统。这个系统让Vue.js能够高效地追踪和响应数据的变化，并在数据...
记录原生html+js实现左侧导航栏右侧内容页的实现
10-17
在网页设计中，左侧导航栏和右侧内容页的布局是一种常见的网页结构，广泛应用于各种网站，如企业官网、博客、论坛等。这种布局能够清晰地将网站的主要功能和具体内容划分开来，提供良好的用户体验。本篇文章将深入...
Vue实现点击导航栏当前标签后变色功能
10-14
在Vue.js中，实现点击导航栏当前标签后变色的功能是一项常见的需求，它能提供良好的用户体验，让用户清楚地知道当前所在页面。以下是如何利用Vue.js实现这一功能的详细步骤和相关知识点。 首先，我们需要在HTML模板...
vue.js实现标签页切换效果
10-18
主要介绍了vue.js实现标签页切换效果，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
08-29
本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli），具有一定的参考价值，有需要的可以了解下
左侧菜单栏控制右侧页面内容切换
01-18
本demo所需技术：jQuery+Bootstrap 本demo所用工具：IDEA 本demo主要实现功能： 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
vue+ElementUI实现左边导航栏点击右边内容变化（亲测有效）
热门推荐
cheng9436的博客
11-26 1万+
vue点击击左边的导航栏，实现右边的内容发生改变；左边导航栏，实现右边路由跳转
Vue左侧菜单栏切换，右侧内容随之改变
Harley567
11-18 1663
重点在于路由配置一定要redirect 否则第一次进入页面显示空白
Vue Tabs Component：轻松实现Vue中的标签页功能
gitblog_00132的博客
01-14 314
Vue Tabs Component：轻松实现Vue中的标签页功能 vue-tabs-component An easy way to display tabs with Vue 项目地址: https://gitcode.com...
vue2tagsview标签导航栏切换右侧点击菜单功能
07-15
在vue2tagsview中实现标签导航栏切换右侧点击菜单功能的一种常见方式是使用路由和动态组件。以下是一个简单的示例： 1. 首先，确保你已经安装了vue-router和vue2tagsview： ```bash npm install vue-router vue2tagsview ``` 2. 创建一个基本的Vue应用，并配置路由： ```javascript // main.js import Vue from 'vue'; import VueRouter from 'vue-router'; import Vue2TagsView from 'vue2tagsview'; import Home from './components/Home.vue'; import About from './components/About.vue'; import Contact from './components/Contact.vue'; Vue.use(VueRouter); Vue.use(Vue2TagsView); const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact }, ]; const router = new VueRouter({ routes, }); new Vue({ router, render: (h) => h(App), }).$mount('#app'); ``` 3. 在App.vue中使用vue2tagsview组件： ```vue <template> <div id="app"> <vue2-tags-view></vue2-tags-view> <router-view></router-view> </div> </template> <script> export default { name: 'App', }; </script> ``` 4. 创建你的页面组件（例如Home.vue、About.vue、Contact.vue）： ```vue <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> export default { name: 'Home', data() { return { title: 'Home Page', content: 'Welcome to the home page!', }; }, }; </script> ``` ```vue <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> export default { name: 'About', data() { return { title: 'About Page', content: 'This is the about page!', }; }, }; </script> ``` ```vue <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> export default { name: 'Contact', data() { return { title: 'Contact Page', content: 'Feel free to contact us!', }; }, }; </script> ``` 现在，当你在标签导航栏中点击不同的标签时，右侧的内容会切换到对应的页面组件。这就是如何在vue2tagsview中实现标签导航栏切换右侧点击菜单功能的基本步骤。你可以根据你的实际需求进行进一步的定制和扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值