1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面显示区域添加router-view标签 c.在菜单栏的 el-menu ...
简介:Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。 Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。
router.push({ path: "/main/customSelect/customSelect", state, }); };目标页面获取参数:const name= history.state.copyData搞定舒服啊 8.el-table表头 超长省略号,hover上去展示全部 1 2 3 4 5 6 7 8 .my_table :deep(.el-table .cell) { white-space: nowrap !important; } .my_table :deep...
当访问 /login 时,App.vue 中的 <router-view/> 会替换成 LoginView 组件,与 MainView 组件毫无关系,此时不会加载 MainView 组件,因此页面UI效果就不会出现 MainView 中的布局了,至此便实现了登录页面与非登录页面独立渲染的目的。 方案二:多个 <router-view name="xxx"/> 方式 该方式利用路由的namen属性指定...
menuName: '标题一_3', type: '2', }, ] },{ menuName: '标题二', type: '1', },{ menuName: '标题三', type: '1', } ] </script> <template> <el-row class="tac"> <el-col :span="12"> <el-menu :router=true default-active="home" ...
5、而导航下的路由,有二级导航,三级导航,说不定还有四级,一个层级的路由需要搭配一个routerView,才会展示页面 6、可以新建一个只有routerview的页面或者用jsx写一个也可以,有三级导航的时候,二级导航就是这个routerview的公共页面,三级导航的时候,一级,二级就需要用到这个公共的routerview,然后以此类推 ...
html代码其实简单,左侧菜单用<el-menu>,右侧展示使用<router-view>。后者不用做啥设置,点击菜单项,结果自然就展示在右侧了。好神奇。 以下是一个包含侧边栏的页面示例。支持二级菜单。三级或更多就不行了。 <template> ...
// 选择菜单时,在<router-view>渲染对应的组件 const router = useRouter() function handleSelete(index: RouteLocationRaw) { router.push(index) }</script><template><divclass="common-layout"><el-container><!-- Element Plus Menu: https://element-plus.gitee.io/zh-CN/component/menu.html --><...
这里el-menu添加router属性的意思就是让我们的菜单点击的时候启用路由功能,el-menu-item的index属性配置要和我们的路由的path一一对应 再一方面就是我们的主内容区域要添加路由视图,这样路由切换的时候页面会显示在这个区域里 <el-mainclass="content"><!-- 放置表格 --><router-view/></el-main> ...
class="content"> <HeaderNavigation @module-menu-click="handleModuleMenuClick" /> <div class="main"> <router-view></router-view> </div> </el-container> </el-container> </div></template><script setup lang="ts">import { ref } from 'vue';import SidebarNavigation...