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.如果要在其它页面新增按钮，跳转到这个新页面，可以参考以下方法：

      <a
        v-if="true"
        href="javascript:void(0);"
        v-on:click="jumpTo('user-record.html')"
        style="padding-bottom:15px;padding-top:15px"
      >
        跳转到user-record页面
      </a>

  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显示标签的样例如下：

  <div
          v-for="(p, index) in historyList"
          :key="index"
        >
          <div>第 {{ index + 1 }} 条数据</div>
          <div>
            <pre
              class="myclass"
              :class="{
                'list-class1': p.isAdmin == '1',
                'list-class2': p.isAdmin != '1',
              }"
              >{{ p.isAdmin == '1' ? '是管理员' : '不是管理员' }}</pre>
        </div>
  </div>

其中，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的方法的返回值。