美化布局和嵌套路由 day3

美化页面

• 添加标题

  
  
  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.
  
  
  image.png
  
  效果如图:
  
  image.png
• 删掉以下代码以删除不必要的顶部菜单栏(按自己需求):

            Home
            Components
            Layout
          
          Content

效果如图:

image.png

• 美化菜单栏
  1.按需求增加item或者删除不必要的item，并且修改文字。

 
              工作区域
            
            
              
              用户列表
              用户统计
            

效果如图:

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里面添加语句:
  
  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:

• 在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的嵌套页面后才有内容显示，这显然不是我们想要的，我们希望它有默认页面。