vue中布局页的使用

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

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

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

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

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

Layout.vue代码如下

 1 <template>
 2   <v-app id="LoginLayout">
 3     这是登录母版页
 4     <v-content>
 5       <router-view ></router-view>
 6     </v-content>
 7   </v-app>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'LoginLayout',
13   data() {
14   },
15   methods: {
16   }
17 }
18 </script>
19 
20 <style scoped>
21 </style>
View Code

Login.vue代码如下

 1 <template>
 2   <div style="margin-left:40%; margin-top:5%;width:300px;">
 3     <el-form ref="form" :model="form" label-width="80px">
 4       <el-form-item label="帐号">
 5         <el-input v-model="form.name" maxlength="20"></el-input>
 6       </el-form-item>
 7       <el-form-item label="密码">
 8         <el-input v-model="form.password" type="password" maxlength="10"></el-input>
 9       </el-form-item>
10       <el-form-item label="角色">
11         <el-select v-model="form.region" placeholder="请选择">
12           <el-option label="客服" value="shanghai"></el-option>
13           <el-option label="销售" value="beijing"></el-option>
14         </el-select>
15       </el-form-item>
16       <el-form-item>
17         <el-button type="primary" @click="onSubmit">登录</el-button>
18       </el-form-item>
19     </el-form>
20   </div>
21 </template>
22 
23 <script>
24 export default {
25   data() {
26     return {
27       msg: 'Welcome to Your Vue.js App2222',
28       form: {
29         name: '',
30         region: '',
31         date1: '',
32         date2: '',
33         delivery: false,
34         type: [],
35         resource: '',
36         desc: ''
37       },
38       IsLogin: false
39     }
40   },
41   methods: {
42     onSubmit() {
43       console.log('submit!')
44 
45       // eslint-disable-next-line no-array-constructor
46       var list = new Array()
47       list.push('lucy')
48       // location.href = '/User/UserList'
49       this.$post('/api/User/GetUserInfoList', {
50         PageSize: 2,
51         PageIndex: 1,
52         list: list
53       }).then((response) => {
54         console.log(response)
55       })
56     }
57   }
58 }
59 </script>
View Code

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

2、路由器

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

 1 import LoginLayout from '@/components/Login/Layout'
 2 
 3 {
 4       path: '/Login',
 5       component: LoginLayout,
 6       children: [
 7         {
 8           name: 'Login',
 9           path: 'Login',
10           component: () => import('../components/login/Login.vue')
11         }
12       ]
13     },

 3、运行项目

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

 

 

posted @ 2020-11-24 18:11  PrintY  阅读(2410)  评论(0)  编辑  收藏  举报