Vue操作
目前一种可行的逻辑是这样:
首先App.vue中的界面被 <route-view> 接管
@/route/index.js 中设置好默认的界面(一般是登录界面)
@/views/Login.vue 中绘制登录的界面, 以及登录的函数(以跳到Home)
@/views/Home.vue 显示被Layout接管(实际上这里的意思是在router中,将/layout直接指向Layout.vue))
@/views/layout/Layout.vue 是主要的界面, 其中包括整个界面的布局, 其中侧边栏和顶栏继续调用模块, 主页部分被 <route-view> 接管
@/views/layout/components/Header.vue : 顶栏
@/views/layout/components/Menus.vue : 菜单栏
@/views/layout/components/CopyRight.vue : 页脚版权页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// login.vue中的函数
export default {
name: "login",
data() {
return {
username: "",
password: "",
msg: "<b>123</b>"
};
},
methods: {
login() {
// 也就是说可以双向改变
// this.username = "test";
if (this.username == "admin" && this.password == "1234") {
console.log("登录成功");
// 引用 main.js中import的文件
this.$router.push( `/home` );
} else {
console.log("登录失败");
}
}
}
};
编写顺序
先编写好登录界面. 利用假的登录校验数据来尝试跳转到布局界面. 然后开始编写布局界面的控件, 并配置好路由. 配置假数据, 编写测试各个主页. 等到后端部分环节打通, 开始替换部分假数据, 逐个环节测试.
