vue3如何实现点击不同的菜单页切换局部页面

最新推荐文章于 2025-02-08 03:45:00 发布
原创 最新推荐文章于 2025-02-08 03:45:00 发布 · 6.8k 阅读 · 38 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了如何使用VueRouter来构建页面路由。首先从element-plus选择页面组件，然后在JavaScript中引入router并启用。在主容器中插入<router-view>作为页面切换的占位，并为各个组件配置相应的路由路径。以home为主视图，test和test1作为可切换的组件页面。

Vue Router

我们可以使用router来实现

1.准备页面

去饿了么（element-plus）找到自己喜欢的页面然后按需导入，以下以自己的例子来实现
首先引入布局容器
在这里插入图片描述
然后引入菜单栏
在这里插入图片描述
引入这两个，先看效果
在这里插入图片描述
此时基本的页面准备好了

2.在js中引入router并且允许容器使用router

在这里插入图片描述
容器是有这个属性的，但默认值为false在这里插入图片描述
并把菜单栏里对应的文字改为<router-link>

在这里插入图片描述

在你想要变换页面的位置放入<router-view></router-view>占位
比如我是想在main块里进行页面切换
在这里插入图片描述
然后准备切换的组件页面
在这里插入图片描述
在这里插入图片描述
为每个组件配置router路径
在这里插入图片描述
注意这里一定要配置为此视图的子路径，如果配置和home同级，那么当点击菜单栏后就会将整个页面替换为组件页面
项目目录如图
在这里插入图片描述
以home为主视图，以test，test1为组件进行切换

运行效果

在这里插入图片描述

标签
#vue.js #javascript #前端
藏猫虎
关注
vue3中如何实现通过点击不同的按钮切换不同的页面
weixin_56733569的博客
09-08 4231
使用标签实现动态绑定组件
js实现点击切换导航栏效果(排他思想)
weixin_46378070的博客
02-25 2932
使用html+css+js，实现简易导航栏切换效果
vue3通过el-cascader实现动态菜单切换页面
青莳的博客
03-21 788
菜单结构说明：component对应的就是你要跳转的页面组件，也就是上面import进来的组件。然后通过emitComponentChange方法来跳转对应页面。下面是切换页面后要显示的目标页面，这里接收上面emitComponentChange 方法传递过来的组件。还有一种方式是通过el-menu实现的，效果同上，使用的js方法都是一样的。如果只有一级菜单只会显示一个按钮。
vue 如何实现页面切换
bin_2659017380的博客
04-18 6461
一、确保计算机已经安装了nodejs环境 1）window + r 输入cmd 打开终端 2）在终端中输入命令：node -v 出现：v12.14.0 版本号（v+数字）证明已将安装成功 二、首次安装vue-cli 时需要全局安装脚手架 在终端中输入：npm install vue-cli -g vue init weabpak 项目名 cd 项目名 输入npm install 启动：npm run dev 三、在 APP.vue 组件内定义 <template> <di
【前端】实现Vue组件页面跳转的多种方式
码农研究僧的博客
02-09 1万+
通过某个Button让页面多种方式跳转
vue 点击左侧菜单右侧视图切换
weixin_39818813的博客
09-28 1万+
1.业务需求： 点击左侧的侧边栏菜单，希望只更新右侧的视图，实现这种局部更新的效果。 这里就需要用到Vue的路由控制了。 2.实现： 2-1 在router.js中： 截图： router.js完整代码： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import center from '../views/center.vue...
Vue3点击侧边导航栏完成切换页面内组件（WEB）
li-xun的博客
10-23 1万+
Vue3点击侧边导航栏完成切换页面内组件（WEB）
Vue（七）SPA 单页面及应用方式
热门推荐
商务合作 | 共同学习 | 携手共进
11-04 7万+
vue：单页面应用SPA。
【vue】vue中如何实现SPA 单页面应用_09
青春木鱼的博客
06-21 5183
SPA（ single page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。所以，基于以上特性，对单页应用来说模块化的开发和设计显得相当重要。..................
vue实现页面切换的两种方法
曾小超的博客
11-15 2万+
一种是通过vue-router切换页面，一种是通过v-if来切换页面。 1.vue-router的方法： (1).安装Vue-Cli npm install -g @vue/cli (2).创建一个项目 vue create hello-world (3).通过空格勾选上router、store、scss 系统会自动生成router.js文件，store.js文件 (4).新建...
vue点击按钮实现简单页面的切换
43612538的博客
09-05 4359
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <
VUE实现页面局部刷新
Swallow的博客
10-23 1万+
vue实现页面刷新 在我的页面里有使用过三种页面刷新的方法，接下来挨个介绍下： 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新的页面地址"); //页面刷新 以上两种方式都可以有页面刷新的效果，但是缺点就是会出现空白页，第三种方式就可以解决这一缺点，我们一起来看看。。。 三、provide / inject 组合方式 首先在你的App.vue页面添加v-if=“isRouterAlive”，如以下代码
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》062-案例：实现一个多页面单页应用程序
最新发布
愚公智库
02-08 12万+
在当今的前端开发中，单页面应用程序（SPA）因其流畅的用户体验和快速的响应能力而备受欢迎。虽然 SPA 通常意味着只有一个页面，但通过合理的路由管理和组件化设计，我们可以实现一个多页面的表现，给用户带来更丰富的交互体验。借助 Vue.js 和 Vue Router，我们能够轻松地构建一个功能强大且结构清晰的多页面单页应用程序。本文将通过一个实际案例，详细展示如何实现一个多页面单页应用。
【前端知识之Vue】对SPA单页面的理解
weixin_44337386的博客
06-15 4132
本系列主要整理前端面试中需要掌握的知识点。本节介绍对SPA单页面的理解。
Vue3中如何进行页面局部刷新，组件刷新
执着
03-17 2万+
Vue3中如何局部刷新，组件刷新。今天在给vue3的项目中进行数据绑定的时候，发现我删除一条记录页面不会自动刷新，还是保留原来的状态但是数据已经传送给后端，后端也完成了响应的处理
实现菜单导航栏点击局部内容随之改变的效果的几种方法
weixin_46102597的博客
11-29 1万+
方法1 创建多个div,使用display,控制局部div是否隐藏和显示。这种方法操作简单，只需要掌握html,css,js的基本知识便可以实现。适合前端学习的新手实现导航栏点击局部改变内容的效果。但是这会使得页面的代码极为庞大，并且不易于代码得管理。 示例1：（其中引用了bootstrap，对样式的布局可以自行根据需要修改） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
Vue3实现刷新页面局部内容
WEB前端李志杰
07-12 1万+
一文教你在Vue3中如和实现页面的局部刷新。
DAY20240905 VUE:单页面应用SPA，vue路由的安装，vue一级路由，路由重定向
weixin_52881828的博客
09-05 1077
DAY20240905 VUE:单页面应用SPA，vue路由的安装，vue一级路由，路由重定向
基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换
weixin_40996100的博客
04-08 7488
基于vscode实现vue3项目创建启动并安装配置路由vue-router实现单页面组件切换
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值