vue新增页面开发方法简单总结

痛定思痛。 2024-03-31 16:04 65阅读 0赞

## 一、说明 ##

实际工作中，一般只是新增/修改已有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`的内容样例如下：

注意，这里`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的方法的返回值。