vue搭建后台管理页面(点击左侧导航,切换右侧内容)
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子路由
vue搭建后台管理页面(点击左侧导航,切换右侧内容)的更多相关文章
- web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)
(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- HTML高级标签(2)————窗体分帧(2)————后台管理页面
使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...
- 老男孩Day16作业:登录、注册、后台管理页面(动态)
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- 前端武器库系列之html后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...
- HTML后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...
- Vue + ElementUI 后台管理模板推荐
最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
- 8 功能6:后台管理页面,编辑文章,xss攻击
1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
随机推荐
- Mybatis_映射文件配置
获取自增主键的值 若数据库支持自动生成主键的字段(比如 MySQL 和 SQL Server),则可以设置 useGeneratedKeys=”true”,然后再把 keyProperty 设置到目标 ...
- 01 git 概念
本文转自“廖雪峰的git教程” 集中式版本控制系统:版本库是集中存放在中央服务器的,中央服务器就好比是一个图书馆,你要改一本书,必须先从图书馆借出来,然后回到家自己改,改完了,再放回图书馆. 分布式版 ...
- WCF把书读薄(4)——事务编程与可靠会话
WCF把书读薄(3)——数据契约.消息契约与错误契约 真不愧是老A的书,例子多,而且也讲了不少原理方面的内容,不过越读越觉得压力山大……这次来稍微整理整理事务和可靠会话的内容. 十八.事务编程 WCF ...
- 第18章-使用WebSocket和STOMP实现消息功能
Spring 4.0为WebSocket通信提供了支持,包括: 发送和接收消息的低层级API: 发送和接收消息的高级API: 用来发送消息的模板: 支持SockJS,用来解决浏览器端.服务器以及代理不 ...
- 20169219 实验二 Java面向对象程序设计
实验二 Java面向对象程序设计 一.程序设计中临时变量的使用 任务: //定义一个数组 int arr[] = {1,2,3,4,5,6,7,8}; //打印原始数组的值 for(int i:arr ...
- python DDT读取excel测试数据
转自:http://www.cnblogs.com/nuonuozhou/p/8645129.html ddt 结合单元测试一起用 ddt(data.driven.test):数据驱动测试 由外部 ...
- 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!(转载)
Anagrams of string(带有重复项) 使用递归.对于给定字符串中的每个字母,为字母创建字谜.使用map()将字母与每部分字谜组合,然后使用reduce()将所有字谜组合到一个数组中,最基 ...
- bitbucket使用教程
Bitbucket使用说明: 使用者请直接看第一步,第二步和egit使用说明, 需要自己创建仓库的可以看三四步 第一步:新用户注册 bitbucket.org 然后按步骤创建一个教程代码库 可以选择下 ...
- 21天学通C++学习笔记(三):变量和常量
1. 简述 内存是一种临时存储器,也被称为随机存取存储器(RAM),所有的计算机.智能手机及其他可编程设备都包含微处理器和一定数量的内存,用地址来定位不同的存储区域,像编号一样. 硬盘可以永久的存储数 ...
- 四、命令行模式和Node交互模式
请注意区分命令行模式和Node交互模式. 看到类似C:\>是在Windows提供的命令行模式: 在命令行模式下,可以执行node进入Node交互式环境,也可以执行node hello.js运行一 ...