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%;width: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，運行界面如下圖所示：