1.1. 安装 Vue Router 首先确保你已经安装了 Vue Router。 如果还没有安装,可以通过 npm 或 yarn 进行安装: npm install vue-router@4//或者使用 yarnyarn add vue-router@4 1.2. 设置路由 创建路由配置文件,通常命名为router.js或router/index.js,并定义你的路由: import { createRouter, createWebHistory }...
定义好router路由表之后，你就可以在Menu组件中根据这些路由信息来动态生成导航菜单的各项内容了。你可以使用Vue3的模板语法和条件渲染等特性，结合router路由表中的数据，来灵活地生成和展示导航菜单的各项内容。这样，用户点击菜单项时，就能根据定义的路由规则跳转到相应的页面，实现导航的功能。3.2. 配置路由 接下来...
<router-view></router-view> 我们将路由出口标签放在main组件中 meta为路由元信息,可以设置属性来控制路由的显示与隐藏和icon图标 进入正题 先展示一下组件嵌套关系,切记el-menu标签(element-ui)是放在layout中的index.vue中的,因为这里需要使用到递归组件,需要传递props属性 menu组件中引入route.js中的路由数据。 m...
//引入配置文件router.json let routerMenu = require('@/config/router.json'); routerMenu = routerMenu.menu; let menu = []; //配置路由 let formatRoute = function (routerMenu,menu){ for(let i = 0; i < routerMenu.length; i++){ let temp = { path: routerMenu[i].path, name: route...
1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白
router.js的改造 router.js路由文件的改造思路: 1、加载静态路由,用户能直接访问的路由,不需要判断权限就需要直接展示的。 2、加载动态路由,需要判断用户权限,需要从后台传过来,需要动态生成菜单的。 router.js const router = new VueRouter({ mode: 'history', ...
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
// 代码位置:src/menu/leftMenu.vue mounted(){ console.log(this.$router.options.routes); } 1. 2. 3. 4. 打印结果如下。 可以看到这个数据就是我们在router.js中配置的路由数据。 为了方便使用,我将这个数据定义到计算属性中。 // 代码位置:src/menu/leftMenu.vue ...
// 设置router 为了子组件:index="item.path" 绑定做跳转页面<template><div><el-scrollbarwrap-class="scrollbar-wrapper"><el-menurouter:default-active="activeMenu":collapse="isCollapse":background-color="variables.menuBg":text-color="variables.menuText":unique-opened="false":active-text-color="...
我用的是vue-router的beforeRouteLeave,但是出现了一个问题,当用户点击侧边栏的目录,页面的路由没有改变,但是点击的侧边栏会先高亮,如果用户点击取消,此时的侧边栏定位就会出现错误 image.png 解决方法: 在layout里面的menu组件,把原来点击事件就赋值给selectKey,去掉,加一个watch监听,当前页面的路由是否改变,改变了才...