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

• 前端

Vue Router

我们可以使用router来实现

1.准备页面

去饿了么（element-plus）找到自己喜欢的页面然后按需导入，以下以自己的例子来实现

首先引入布局容器

在这里插入图片描述

然后引入菜单栏

在这里插入图片描述

引入这两个，先看效果

在这里插入图片描述

此时基本的页面准备好了

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

在这里插入图片描述

容器是有这个属性的，但默认值为false在这里插入图片描述

并把菜单栏里对应的文字改为

在这里插入图片描述

在你想要变换页面的位置放入占位

比如我是想在main块里进行页面切换

在这里插入图片描述

然后准备切换的组件页面

在这里插入图片描述

在这里插入图片描述

为每个组件配置router路径

在这里插入图片描述

注意这里一定要配置为此视图的子路径，如果配置和home同级，那么当点击菜单栏后就会将整个页面替换为组件页面

项目目录如图

在这里插入图片描述

以home为主视图，以test，test1为组件进行切换

运行效果

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/744b8e498b.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐