vue新增页面开发方法简单总结
一、说明
实际工作中，一般只是新增/修改已有vue项目的页面，很少从零开始搭建一个新的vue项目。
在此简要总结下新增页面的开发方法。
二、步骤
1.首先找一个相似的页面，复制一份，修改为不同的名称。
(1)例如，有一个页面，位于这个文件夹：
E:\mobile-project\src\modules\user\user-config
其中有3个文件：
app.vue
main.js
tmpl.html
访问路径是：
http://localhost:10001/web-test/user/user-config.html?user=abc&sign=78d583f0176cd6b05ed92f225a88b
(2)可以把这个文件夹整个复制，放在相同的目录下，文件夹重命名为user-record，其中也是包含app.vue, main.js, tmpl.html这3个文件。
这样，就可以用以下路径访问到：
http://localhost:10001/web-test/user/user-record.html?user=1&sign=1
2.新文件夹中，main.js, tmpl.html一般不用修改，只修改app.vue文件即可。
3.如果要在其它页面新增按钮，跳转到这个新页面，可以参考以下方法：
跳转到user-record页面
methods: {jumpTo(destination) {window.location.href ="./user-record.html?user="+user+'&sign='+sign;}},
}
说明：
例如，在http://localhost:10001/web-test/user/user-config.html?user=abc&sign=78d583f0176cd6b05ed92f225a88b页面点击这个跳转按钮，就会跳转到http://localhost:10001/web-test/user/user-record.html?user=1&sign=1页面。（只把user-config.html换成user-config.html后跳转；./就是从当前位置开始的意思）
3_5.记录下import与export的用法
//这个其实没有用到
//这个的意思是，把项目src目录下的utils目录下的goto.js里的go方法与to方法引入，使得可以在这个页面使用这2个方法
import go, { to } from '@utils/goto'--------------------------------------------------goto.js样例如下：（如果想要让其它js可以使用这个方法，就需要这样写,export）
function to(path, options) {...}
function go(...args) { ...}
export default go;
export { go, to };4.跳转到新页面后，需要接收传来的参数，就可以在app.vue中这样写：
import param from '@utils/url-param'
const user = param('user')
const sign = param('sign')
这样就可以获取到参数，供后续使用。
url-param.js的内容样例如下：
let store = null;function serialize(url) {if (url === '') return {};const search = url.match(/\?(.+)$/);if (!search) return {};const dict = search[1].split(/[&|]/ig);const params = {};dict.forEach((item) => {const [key, val] = item.split('=');params[key] = val;});return params;
}export default function getURLParam(name) {if (!store) {const query = window.decodeURIComponent(window.location.search);store = serialize(query);}return store[name];
}export { serialize };
注意，这里url-param.js导出的默认方法是getURLParam，所以当上方使用import param from '@utils/url-param'时，实际上相当于给getURLParam起了个别名叫param，使用param方法就是在使用getURLParam方法了。
5.新页面app.vue中，常用的几点如下：
(1)html标签中，可以使用v-if判断，值为true时才显示该标签，否则不显示。
(2)html标签中，可以使用v-on:click绑定点击事件方法
(3)v-for显示标签的样例如下：
第 {{ index + 1 }} 条数据{{ p.isAdmin == '1' ? '是管理员' : '不是管理员' }} 其中，historyList是一个json数组，在循环中用p.isAdmin就可以取到数组中的json的key为isAdmin的value值；index是循环的下标，从0开始。
historyList需要写在data()块的return{}里，如下：
data() {return {historyList: [],}
}
(4)methods块里可以写当前页面用到的方法，例如：
methods: {init() {this.historyList = [{"user":"1","isAdmin":"1"},{"user":"2","isAdmin":"0"}]}
}
注意，html标签中，直接使用historyList即可；script块中，使用的话需要用this.historyList。
(5)created方法，当页面加载时会调用（也就是说，新跳入这个页面会调用；从其它页面返回这个页面，则不会调用）
created() {console.log('cookie', document.cookie)this.init()},
同样，如果要用methods里的方法，也需要加this。
(6)mounted方法，当页面出现时就会调用（新跳入这个页面会调用；从其它页面返回这个页面，也会调用）。
(7)const声明的变量，在script块中不需要加this就可以使用，但是在html标签中不能使用。（如果想在html块使用，可以在data块再声明一个变量，然后在created()方法中给这个变量赋值）
(8)then方法的意思是，前一个方法执行完成后，再执行then方法里的内容。
例如：
this._findHistory('1','null').then(res => {this.historyList = res.data}})
其中，res是_findHistory方法执行后的返回结果。
(9)Promise.race方法，会同时执行其中的多个方法，其中哪个方法先执行完，就返回哪个方法的结果。样例如下：
Promise.race([this._a(),this._b()]).then(res => { console.log("a or b", res) }).finally(res => {console.log("over",res)this._over()})
如果_a方法先执行完，"a or b"就打印_a的结果；
如果_b方法先执行完，"a or b"就打印_b的结果；
最后还会执行下_over方法。
（实际场景使用时，可以发2个给后台的请求、哪个返回的快就用哪个结果。）
10.Promise.all方法，也会执行其中的所有方法，返回值分情况：
(1)如果其中的方法都执行成功，Promise方法的状态就变成fulfilled，此时这些方法的返回值就组成一个数组，返回。
(2)只要其中的方法有一个被rejected，Promise方法的状态就变成rejected，此时返回第一个被reject的方法的返回值。