关键词:
home.vue页面
<template> <div style="background-color: #EBEBEB;min-height:900px"> <div style="width:100%;background-color: #636363; overflow: hidden"> <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%"> 网站首页 </span> <span class="demonstration" style="float:left;padding:5px;color:white;margin-left:2%;width:15%"> <el-input placeholder="请输入" icon="search" v-model="searchCriteria" :on-icon-click="handleIconClick"> </el-input> </span> <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%"> <el-dropdown trigger="click"> <span class="el-dropdown-link" style="color:white"> admin<i class="el-icon-caret-bottom el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </span> </div> <div style="margin-top:5px"> <el-row :gutter="10"> <el-col :xs="4" :sm="4" :md="4" :lg="4"> <div> <el-menu default-active="1" class="el-menu-vertical-demo" style="min-height:900px" @select="handleSelect"> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item> </el-menu> </div> </el-col> <el-col :xs="20" :sm="20" :md="20" :lg="20"> <div> <div style="border: 1px solid #A6A6A6; border-radius:6px; padding:5px; margin:2px; background-color: white"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="item in breadcrumbItems">item</el-breadcrumb-item> </el-breadcrumb> </div> </div> <div style="margin-top:10px"> <router-view></router-view> </div> </el-col> </el-row> </div> </div> </template> <script type="text/ecmascript-6"> export default data() return searchCriteria: ‘‘, breadcrumbItems: [‘导航一‘], , methods: handleIconClick(ev) console.log(ev); , handleSelect(key, keyPath) switch(key) case ‘1‘: this.$router.push(‘/Page1‘); this.breadcrumbItems = [‘导航一‘] break; case ‘2‘: this.$router.push(‘/Page2‘) this.breadcrumbItems = [‘导航二‘] break; case ‘3‘: this.$router.push(‘/Page3‘) this.breadcrumbItems = [‘导航三‘] break; , , </script>
插件Page1,Page2,Page3页面
<template> <div> 这是第一个页面 </div> </template> <script type="text/ecmascript-6"> export default data() return </script>
index.js文件
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/Home‘ import Login from ‘@/components/Login‘ import Page1 from ‘@/components/page1‘ import Page2 from ‘@/components/page2‘ import Page3 from ‘@/components/page3‘ Vue.use(Router) export default new Router( routes: [ path: ‘/‘, name: ‘home‘, component: Home, redirect:"Page1",//重定向,第一次进入就进入Page1,不添加的话第一次进入右侧是空白 children:[ path: ‘/Page1‘, name: ‘Page1‘, component: Page1 , path: ‘/Page2‘, name: ‘Page2‘, component: Page2 , path: ‘/Page3‘, name: ‘Page3‘, component: Page3 ] ] )
添加redirect:"Page1",输入地址的时候重定向效果
没添加redirect:"Page1",输入地址没重定向效果
一、home.vue的<router-view></router-view>
二、home.vue的this.$router.push(‘/Page1‘)
三、index.js添加redirect:"Page1"重定向
四、index.js的children子路由
后台管理系统的导航设计归纳总结
参考技术A最近在做后台管理系统的页面设计,设计系统返回上一级按钮引发思考,后台系统本身是一个系统嵌套多个系统的存在,那么对于重量挤系统和轻量级系统他们是怎么引导用户实现自己的需求。下面是我的总结,欢迎... 查看详情
谁能帮忙做一个窗体界面,wpf的~就按这个图的就好,点击左侧导航栏可以切换右侧内容的。初学者不了解
谁能帮忙做一个窗体界面,wpf的~就按这个图的就好,点击左侧导航栏可以切换右侧内容的。初学者不了解实际模式,需要学习,急用。真心感谢,条件您说,必有重谢~提供下思路:左侧用Stackpanel,里面放button用来导航,右边用... 查看详情
关于点击左侧侧栏仅切换右侧内容部分
...为全局组件,最开始使用的是插槽的方法,每一个需要此页面的组件都要在外面包裹这个组件,要是有很多页面需要这个组件,那这样的实现方式就不是很便捷,并且点击跳转页面实现切换时页面会刷新,包括这个侧栏也会被刷... 查看详情
使用vue-cli4.0搭建后台系统(顶部导航+左侧导航)第四集
1。主要说一说,顶部导航和左侧菜单的联动和切换。主要 组件components->topbar->inedx.vue<el-menu :default-active="activeMenu" class="el-menu-bar"& 查看详情
vue页面手动刷新,导航栏激活项还原到初始状态问题解决方案(代码片段)
场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容。问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list)... 查看详情
html5左侧导航右侧内容
用notepad++如何写左侧导航右侧内容,点击导航相应的处,在右边的栏内显示点击后相应的内容?求代码,小白求带。很简单啊,右边放一个iframe框架,name值=自定义昵称,然后左边链接里加上target=框架name的名称,如<iframescr=&... 查看详情
javascript处理数据完成左侧二级菜单的搭建
...,只是希望大家能明白实现原理就好。 左侧的菜单的搭建: 1、首先将我们需要应用的菜单导入数据库。 下面的截图是我导入的数据: 根据我的业务需求,我需要四个父菜单,所以我将他们... 查看详情
javascript处理数据完成左侧二级菜单的搭建
...,只是希望大家能明白实现原理就好。 左侧的菜单的搭建: 1、首先将我们需要应用的菜单导入数据库。 下面的截图是我导入的数据: 根据我的业务需求,我需要四个父菜单,所以我将他们... 查看详情
iframe嵌套vue页面不能切换
...,然后点击三级横向菜单,可进行iframe的内容切换每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的,包括左侧边栏,上方的面包屑等用户在使用的时候,可能要切换别的系统就要在浏览器里,新打开... 查看详情
一博客首页搭建搭建《ivx低代码仿csdn个人博客制作》
制作iVX低代码项目需要进入在线IDE:https://editor.ivx.cn/一、头部导航栏思路参考首先我们可以查看CSDN的博客首页,从中查看一下布局:在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个log... 查看详情
umi学习-8antdmenu点击切换框架页内容页面(代码片段)
...‘react‘;classUserextendsReact.Componentrender()return(<div>用户管理</div>);exportdefaultUser;importReactfrom‘react‘;classUserRoleextendsReact.Componentrender()return(<div>角色管理</div>);exportdefaultUserRole;2、修改umirc.tsroutes部分如下constconfig:ICo... 查看详情
python测试开发django-134.css页面布局:左侧固定,右侧自适应布局(代码片段)
前言常见的后台管理页面,左侧固定宽度展示操作菜单栏,右侧显示左侧展示管理内容。这是一种最常见的左侧固定,右侧自适应布局方式。左侧固定,右侧自适应布局在container1里面写2个div<body><divclass=... 查看详情
vue+element搭建后台管理系统(代码片段)
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。组件结构组件封装重构后,试图组件结构如下图所示代码一览Home组件被简化,包含导航、头部和主内容三个组件。Home.vue<templ... 查看详情
html页面布局,右侧菜单不动,左侧内容溢出后可以操作滚动条
/*导航条*/.navbar{position:relative;min-height:50px;margin-bottom:0px;border:1pxsolidtransparent;}/*左侧菜单栏*/.left-menu{/*padding:20px;*/text-align:center;/*background-color:bisque;*/position:fixed;top:50p 查看详情
阿里百秀项目实践---01项目介绍
...览演示一个自媒体信息发布平台管理员(编辑)通过网站后台管理界面管理(发布、维护)自媒体内容 用户登录登录界面可以根据是否填写表单内容拒绝登录操作管理员可以通过用户名和密码登录到后台内容管理管... 查看详情
vue实现左右滑动内容区控制导航tab同时切换高亮
...容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区。 这里涉及到几个点: 1.左右滑动,那就需要用到swiper 查看详情
解决vue项目点击相同菜单栏页面不刷新
参考技术A痛点:用vue搭建的后台管理系统中,一般点击左侧当前菜单,当前组件是无法刷新的。问题原因:点击相同菜单,因为vue的路由机制是处于相同的路由下,路由组件不重新渲染,因此点击相同路由,vue路由系统不做任... 查看详情
vue项目实战-pc端新闻网页
1、项目初始基于vue-cli搭建项目vuecreatenews-app页面采用flex布局、样式使用sass2、首页的搭建主要包括导航栏,轮播图,及主要新闻的展示 2、点击导航栏可进行不同新闻的切换通过id的不同获得不同的数据,进行页面... 查看详情