vue——element-ui项目中用如何点击导航菜单进行当前页面的router切换？图解只需三步！

先给大家模拟一下场景：想要的效果：下面来看需要配置项使用element-ui的 NavMenu导航，里面的菜单属性里有详细的介绍。第一步配置属性，并把每一项的index改为想要跳转的path：第二步在Home页加上< router-view />插槽：第三步查看路由配置：...

最初都是小白

19664人浏览 · 2019-06-25 16:11:33

最初都是小白 · 2019-06-25 16:11:33 发布

先给大家模拟一下场景：

在这里插入图片描述

想要的效果：

在这里插入图片描述

下面来看需要配置项

使用element-ui的 NavMenu导航，里面的菜单属性里有详细的介绍。

第一步配置属性，并把每一项的index改为想要跳转的path：

在这里插入图片描述
第二步在Home页加上< router-view />插槽：

在这里插入图片描述
第三步查看路由配置（router.js）：

在这里插入图片描述
注意： 导航栏的index属性的路径一定要和router.js里的路径一致哦。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^