vue入坑笔记

1.vue的地址的绑定时需要处理,不然地址会被视为一段字符串不会被解析出来

解决办法:src: require('../images/leftico01.png')

2.vue的具名路由的嵌套

类似于这样的嵌套,你从a至b时虽然路由已经跳转,但是vue会视两个页面为同一个页面,不会将组件重新载入

但是这样的嵌套则完全没有问题

简而言之,就是兄弟关系则路由不能使用同一组件,

但是非兄弟的子孙之间可以这样使用路由,

解决办法:使用watch去监听当前组件所在的路由,根据路由的不同去请求相关的数据

3.vue的异步处理

配置方法

1.去config/index.js

 1 assetsSubDirectory: 'static',
 2 assetsPublicPath: '/',
 3 proxyTable: {
 4             '/api': {
 5                 target: 'https://www.chenwenhao.xin/',
 6         changeOrigin: true,
 7         pathRewrite: {
 8           '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
 9         }  
10       }
11     },

2.去main.js

1 import axios from "axios";
2 
3 Vue.prototype.$axios = axios
4 Vue.prototype.HOST = '/api'

3.在使用的地方

let that = this;
            let url = this.HOST+'/studentmanagement/getHt_information.php';
            this.$axios.post(url, {
                firstName: 'Fred',
                lastName: 'Flintstone'
            })
            .then(function(response) {
                that.items = response.data;
                that.sum = response.data.length;
                //计算共有多少页
                that.page_total = parseInt(that.sum / that.page_num) ;
                if(that.sum % that.page_num > 0){
                    that.page_total++;    
                }
                //将类型写入
                if(that.$route.params.Type) {
                    that.type = that.$route.params.Type;
                }
            })
            .catch(function(error) {
                console.log("erro"+error);
            });

4.别忘了安装 axios的依赖

在npm的项目内 axios --save

4.在vue内引用自己定义的公用js文件

1.自己写一个共用的js文件

2.在vue中引入

import common from "../commom/demo.js"

3.直接使用

直接使用你引入的名字.你要用的函数,不能加this,

common.next_page();

猜你喜欢