美化页面
-
添加标题
image.png - 改变标题样式
.layout-logo{
color: #ffffff;
line-height: 30px;
font-size: 20px;
height: 30px;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
效果如图:
image.png
- 改变整体布局
删除以下代码以去掉横线:
image.png
添加以下代码，让内容区域更加协调:1.
<Layout style="height:calc(100vh - 64px)">
image.png
效果如图:
image.png - 删掉以下代码以删除不必要的顶部菜单栏(按自己需求):
<Breadcrumb :style="{margin: '24px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">Content</Content>
效果如图:
image.png
- 美化菜单栏
1.按需求增加item或者删除不必要的item，并且修改文字。
<MenuItem name="0">
<Icon type="ios-navigate"></Icon>工作区域
</MenuItem>
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>用户管理
</template>
<MenuItem name="1-1" to="/userlist">用户列表</MenuItem>
<MenuItem name="1-2">用户统计</MenuItem>
</Submenu>
效果如图:
image.png
-
在iView官网上拷贝图标代码，替换掉默认图标:
image.png
嵌套路由
-
在views目录下新建user文件夹，再新建userlist.vue文件，里面随便写个div测试用:
image.png - 配置index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Test01',
component: Test01,
children: [
{
path: 'userlist',
name: 'userlist',
component: userlist
}
]
}
]
})
- 在layout里面添加
<router-view></router-view>语句:
image.png -
使用to的语法 可以跳转到嵌套的页面。
image.png
效果图:
image.png
上面这个页面(userlist.vue)是嵌套在Test01.vue里面的，而Test01.vue
是在App.vue里面显示的；我们接下来写一个跟App.vue相同级别的页面。
登录页面
-
在views目录下新建一个login文件夹，再新建一个login.vue文件:
image.png
login.vue:
<template>
<button @click="login">登录</button>
</template>
<script>
// 跳转到主页面
export default {
methods:{
login(){
this.$router.push("/")
}
}
}
</script>
<style>
</style>
- 在index.js添加路由:
import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'
import login from '@/views/login/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/',
name: 'Test01',
component: Test01,
children: [
{
path: 'userlist',
name: 'userlist',
component: userlist
}
]
}
]
})
- 运行后浏览器输入http://localhost:8080/#/login
整体项目效果如下:
image.png
image.png
image.png
上面第二张图片可以看到，一进来的时候是一篇空白的，只有跳转到Test01.vue的嵌套页面后才有内容显示，这显然不是我们想要的，我们希望它有默认页面。
