Layout 和 嵌套路由

回顾一下默认项目代码，App.vue 里在router-view上边有一行img引入了vue 的logo图片

如果我们项目足够的简单，比如只有一种layout，我们大可以在App.vue里就做好布局，
但是我们要做的项目有2种layout，那么我们可以理解为App.vue 渲染的是整页，啥也没有的，在这里去渲染那2种layout布局。

我们先实现这个
先删掉 App.vue 里的
还有下边的样式，看起来没啥鸟用，一会我们自己写

先定义2个layout

在src\layouts目录创建 Login.vue 和 BaseAdmin.vue

// Login.vue

// BaseAdmin.vue

修改router指向它们

这时我在浏览器修改url去访问报了404，应该是哪里有问题，这个对开发没影响的可以暂时不管，先让项目进行下去，空的时候再研究，先注释掉 routes 那的mode配置

router的完整代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BaseAdmin from '@/layouts/BaseAdmin'
import Login from '@/layouts/Login'

Vue.use(Router)

const MyHelloWorld = {
  template: '
我是变的
我也是
我还是goto hello
'
}

const MyTitle = {
  template: '
',
  props: ['title']
}

Vue.component('my-title', MyTitle)

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'MyHelloWorld',
      component: MyHelloWorld
    },
    {
      path: '/admin',
      name: 'BaseAdmin',
      component: BaseAdmin
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

这时我们对url /#/admin 和 /#/login 访问去看生效情况，
然后接下来就是去把这两个页面做的像那么点样子出来

// Login.vue

点了登陆就可以跳去admin页，先这么写，一会再来完善它，不能男女搭配就自己来控制节奏吧，
我是习惯先写一轮html，再写一轮css，反复反复直到需要花精力去完善一个具体的功能页面，

先按照我的习惯来撸一轮html

// BaseAdmin.vue 在baseAdmin里再放一个router-view来做嵌套路由

修改路由给admin增加children

    {
      path: '/admin',
      name: 'BaseAdmin',
      component: BaseAdmin,
      children: [
        {
          path: '',
          name: 'adminHello',
          component: MyHelloWorld,
        }
      ]
    },

页面看起来这个样子，先不考虑排版，查看一下dom结构是我们想要的样子

image

我们来排下版，让页面看起来更直观

image

是不是有那么点样子了，接下来我们新增加几个导航链接

修改路由，还记得之前定义的MyTitle组件么，现在我们要再路由里给它传值

    {
      path: '/admin',
      name: 'BaseAdmin',
      component: BaseAdmin,
      children: [
        {
          path: '',
          name: 'adminHello',
          component: MyHelloWorld
        },
        {
          path: 'daohang1',
          name: 'adminDaohang1',
          component: MyTitle,
          props: {title: "导航1"}
        },
        {
          path: 'daohang2',
          name: 'adminDaohang2',
          component: MyTitle,
          props: {title: "导航2"}
        }
      ]
    },

在浏览器里测试一下效果吧。

最后别忘了提交代码到git仓库

$ git add .
$ git commit -a -m "chapter5"

这次我们还有给代码打个tag，这样以后我们可以很方便的穿越到这一节的代码状态

$ git tag chapter5