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搭建后台管理页面(点击左侧导航,切换右侧内容)的更多相关文章

  1. web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)

    (1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...

  2. python:页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. HTML高级标签(2)————窗体分帧(2)————后台管理页面

    使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...

  4. 老男孩Day16作业:登录、注册、后台管理页面(动态)

    一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

  5. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  6. HTML后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...

  7. Vue + ElementUI 后台管理模板推荐

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...

  8. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  9. 8 功能6:后台管理页面,编辑文章,xss攻击

    1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...

随机推荐

  1. App测试从入门到精通之兼容性和回归测试

    兼容性测试需要考虑的APP测试点 1.不同网络环境下的兼容性测试 2.不同手机操作系统兼容性测试 3.不同应用软件的兼容性测试 4.不同的容量大小的SIM卡之间的互相兼容测试 5.当安装杀毒软件时,应 ...

  2. MongoDB整理笔记の导入导出

    一.导入 1.导入json数据 我们先将表user删除掉,以便演示效果: > db.user.drop(); true > show collections; system.indexes ...

  3. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  4. 新的云主机 python 创建虚拟环境

    1.为什么要搭建虚拟环境? 问题:如果在一台电脑上, 想开发多个不同的项目, 需要用到同一个包的不同版本, 如果使用上面的命令, 在同一个目录下安装或者更新, 新版本会覆盖以前的版本, 其它的项目就无 ...

  5. SQL 2005报错之Restore fail for Server 'DatabaseServerName'.

    Restore fail for Server 'DatabaseServerName'.(Microsoft.SqlServer.Smo) Additional information: Syste ...

  6. MessageBox.Show() 多重用法

    MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBox.Show (IWin32Window, S ...

  7. Unity本地持久化类Playerprefs使用详解

    一.PlayerPrefs是什么? PlayerPrefs是Unity3d提供了一个用于数据本地持久化保存与读取的类.工作原理十分简单,就是以key-value的形式将数据保存在本地,然后在代码中可以 ...

  8. Oracle下载及安装

    Oracle   下载及安装 一.官方下地址:   http://www.oracle.com/technetwork/database/enterprise-edition/downloads/in ...

  9. 转载:ResultMap和ResultType在使用中的区别

    在使用mybatis进行数据库连接操作时对于SQL语句返回结果的处理通常有两种方式,一种就是resultType另一种就是resultMap,下面说下我对这两者的认识和理解 resultType:当使 ...

  10. kubernetes dashboard 安装

    环境:CentOS Linux release 7.3.1611 (Core)IP:192.168.0.103 [1]组件安装yum install device-mapperyum install ...