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

最新推荐文章于 2023-12-02 11:41:47 发布
最新推荐文章于 2023-12-02 11:41:47 发布
阅读量5.8k 收藏 37
点赞数 9
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BeiWoFW/article/details/130353716
版权

Vue Router

我们可以使用router来实现

1.准备页面

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

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

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

在这里插入图片描述

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

运行效果

在这里插入图片描述

藏猫虎
关注
  • 9
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
从A项目跳转到B项目，Vue两个不同项目之间实现跳转
qq_37635012的博客
04-01 288
这里的window.g.BackUrl是我们在B项目的public下的config.js里对跳回地址进行设置的值，也就是在B项目代码config.js里写上A项目的访问地址，方便调用，然后这里homePage也是A项目的首页路由地址，这样就实现了从B项目跳回A项目。最近遇到一个需求，就是有两个不同的项目，姑且叫项目A与项目B吧，前端技术栈都是Vue,现在登录成功A项目后希望点击A项目里某个按钮可以跳转到B项目里的某个页面，然后点击B项目里某个按钮可以跳回到A项目里的某个页面。
Vue3中的动态组件，使用动态组件实现页面的切换。
一起学习
12-01 1478
本文主要介绍Vue3中的动态组件，使用动态组件实现页面的切换。
vue tabs实现页面切换
09-11
类似easyui的tabs实现页面切换，之前使用iframe，vue里面ie的兼容不是特别友好所以改为route-view
vue中点击导航栏部分，页面切换
weixin_30236595的博客
11-05 6316
写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面、并且点击的时候更换颜色 代码自己简单的写一下：(vue) <nav> 　　<ul> 　　　　<li v-for="(item, i) in navData" :class="{ nav_li : active === i }" :key="i" @click="$router.push({ pa...
vue切换菜单
m0_51700376的博客
04-21 1851
示例图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> htm
Vue实现页面切换
前端卷王小白的博客
05-11 1331
Vue-Router,路由页面切换
vue页面切换效果（slide效果切换）
weixin_34389926的博客
11-16 981
最近碰到一个需求，单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样，让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition，最终将实现的核心代码贴出来。这里实现的是上下切换，左右的效果类似。 核心代码如下(App.vue)： 注：这里使用了vue-touch组件来监听swipe事件 最重要的就是transition...
vue实现菜单切换功能
12-29
vue实现菜单切换，点击菜单导航切换不同的内容以及为当前点击的选项添加样式，或者组件。 method里：  css: html代码： 学校新闻 <div v-if=Index class=line></div> 就业新闻 <div v-if=Index ==...
vue实现页面切换滑动效果
10-15
主要为大家详细介绍了vue实现页面切换滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Vue实现页面切换左右滑动效果
08-29
主要为大家详细介绍了基于Vue实现页面切换左右滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-router实现webApp切换页面动画效果代码
08-30
本篇文章主要介绍了vue实现app页面切换效果实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue底部图标和页面切换
05-30
vue配合mint-ui 做简单的切换。自己学习编写，如果使用再工作上，有问题，概不负责
vue2.0实现导航菜单切换效果
08-30
主要为大家详细介绍了vue2.0实现导航菜单切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用vue-router切换页面时实现设置过渡动画
10-16
今天小编就为大家分享一篇使用vue-router切换页面时实现设置过渡动画。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【vue】点击导航菜单切换局部页面，打开展示默认栏目，页面刷新等问题
最新发布
m0_59925573的博客
12-02 2361
需要继续解决一些问题，问题一，进入页面的时候默认展示“订阅管理”这个子级的内容。问题二，在刷新的时候，选中的菜单不会改变（不会丢失）。(2)vue页面，他会根据当前地址栏的路径在这个组件的位置上给你展示。第二个问题，刷新之后保持不变，就是让activeIndex始终指向当前地址栏这个路径。对于问题一，重定向。也就是在进入该页面之前重定向到某个子级，。(1)在index.js中配置路由的时候作为导航页的子级。2.完成1之后，我们可以看到这个页面的基本结构如下图。
vue 如何实现页面切换
bin_2659017380的博客
04-18 6147
一、确保计算机已经安装了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中局部页面跳转_vue实现局部刷新
weixin_39780255的博客
12-19 1476
在App.vue中使用provide//App.vueexport default {name: 'App',data () {return {isRouterAlive: true}},provide(){ //提供return {reload: this.reload}},methods: {reload(){this.isRouterAlive = falsethis.$nextTick( ...
vue一级、二级菜单点击导航栏切换
weixin_46871290的博客
10-28 5019
vue一级、二级菜单点击导航栏切换
Vue3点击侧边导航栏完成切换页面内组件（WEB）
热门推荐
li-xun的博客
10-23 1万+
Vue3点击侧边导航栏完成切换页面内组件（WEB）
vue el-menu实现菜单页面切换
06-01
要实现菜单页面切换，可以使用Vue.js和Element UI中的el-menu组件。 1. 首先，在Vue.js中定义一个数据对象，用来存储菜单选项和对应的页面路由： ``` data() { return { menuItems: [ { index: 'home', title: '首页', route: '/' }, { index: 'about', title: '关于我们', route: '/about' }, { index: 'contact', title: '联系我们', route: '/contact' } ] } } ``` 2. 在模板中，使用el-menu组件来渲染菜单。设置mode属性为horizontal，表示菜单水平排列；设置default-active属性为当前选中的菜单项的index值： ``` <el-menu :default-active="$route.path" mode="horizontal"> <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.route">{{ item.title }}</el-menu-item> </el-menu> ``` 3. 在路由配置中，定义对应的页面组件，并设置路由路径为菜单项的route值： ``` const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] ``` 4. 最后，在页面组件中，使用Vue.js的路由功能来实现页面切换。例如，在点击菜单项时，使用this.$router.push()方法将路由切换到对应的页面： ``` methods: { handleMenuSelect(index) { this.$router.push(index) } } ``` 完整代码示例： ``` <template> <el-menu :default-active="$route.path" mode="horizontal" @select="handleMenuSelect"> <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.route">{{ item.title }}</el-menu-item> </el-menu> </template> <script> import Home from './Home.vue' import About from './About.vue' import Contact from './Contact.vue' export default { data() { return { menuItems: [ { index: 'home', title: '首页', route: '/' }, { index: 'about', title: '关于我们', route: '/about' }, { index: 'contact', title: '联系我们', route: '/contact' } ] } }, methods: { handleMenuSelect(index) { this.$router.push(index) } }, components: { Home, About, Contact } } </script> <style scoped> /* 样式 */ </style> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值