vue中布局页的使用

初识vue，之前都是一直用asp.net mvc的，前台用的razor引擎，在学习vue的时候突然发现布局页面的嵌套使用......好难搞......经过一系列的研究终于搞出来的，在这里remark一下。

因为之前用的mvc框架，所有这里的布局页使用的思想和之前razor使用的思想是一致的。

不知道vue中是否叫布局页，我沿用了mvc中的叫法。该项目中使用了Element框架，所以dom元素和html有些区别。

1、创建子页面和布局页面

Login.vue是子页面，Layout.vue是布局页

Layout.vue代码如下

<template>
  <v-app id="LoginLayout">
    这是登录母版页
    <v-content>
      <router-view ></router-view>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'LoginLayout',
  data() {
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

Login.vue代码如下

<template>
  <div style="margin-left:40%; margin-top:5%;300px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="帐号">
        <el-input v-model="form.name" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="客服" value="shanghai"></el-option>
          <el-option label="销售" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App2222',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      IsLogin: false
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')

      // eslint-disable-next-line no-array-constructor
      var list = new Array()
      list.push('lucy')
      // location.href = '/User/UserList'
      this.$post('/api/User/GetUserInfoList', {
        PageSize: 2,
        PageIndex: 1,
        list: list
      }).then((response) => {
        console.log(response)
      })
    }
  }
}
</script>

以上代码比较简单，应该都能看到懂，Layout中需要添加router-view节点，子页面中正常写就可以了。

2、路由器

路由器是关键，，需要配置路由器，设定布局页的子页面，路由器代码如下：

import LoginLayout from '@/components/Login/Layout'

{
      path: '/Login',
      component: LoginLayout,
      children: [
        {
          name: 'Login',
          path: 'Login',
          component: () => import('../components/login/Login.vue')
        }
      ]
    },

 3、运行项目

cnpm run dev 运行，访问：http://localhost:8080/Login/Login，这里是需要访问子页面，子页面名字叫Login，运行界面如下图所示：