记一下vue常见的方法属性

主要讨论vue

关于传参数取值的方法介绍

1、用法上的

　　刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了哦！！

2、展示上的

　　query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

例子：

{//路由

path:"/detail",

name:"detail",

component:home

}

this.$router.push({

name:"detail",

params:{

name:'nameValue',

code:10011

}

});

this.$router.push({

path:"/detail",

query:{

name:'nameValue',

code:10011

}

});

出来：this.$route.params.code //

https://segmentfault.com/a/1190000012393587

下面讲的这个就是常用场景父--子的路由匹配

在父组件中

<li v-for="article in articles" @click="getDescribe(article.id)">

2中使用query和params的形式query形式路由地址要添加，params的形式路由地址不需要改变

实例如下：

第一种：

this.$router.push({

name: 'Describe',

params: {

id: id

}

})

路由配置

{

path: '/describe',

name: 'Describe',

component: Describe

}

在子组件中接受

this.$route.params.id

方法二

this.$router.push({

path: '/describe',

query: {

id: id

}

})

路由配置

this.$router.push({

path: '/describe',

query: {

id: id

}

})

{

path: '/describe',

name: 'Describe',

component: Describe

}

在子组件中接受

this.$route.query.id

方法3是路由地址会变化的

getDescribe(id) {

// 直接调用$router.push 实现携带参数的跳转

this.$router.push({

path: `/describe/${id}`,

})

路由地址

{

path: '/describe/:id',

name: 'Describe',

component: Describe

}

子组件中接受

this.$route.params.id

看github的库，看官网一般会写有用法，知道怎么用。用法一般在doc 里面那个文件夹

在页面中添加 ref ="";

 <div ref="article" @scroll="scroll($event)" class="article">
      <div class="loading">
        <i v-show="isLoading" class="icon-loading"></i>
      </div>
        <router-view></router-view>
    </div>
ji获取dom
 toTop() {
      console.log(this.$refs)
      if (this.$refs.article.scrollTop <= 0) {
        return;
      }
      let time = setInterval(() => {
        if (this.$refs.article.scrollTop <= 0) {
          clearInterval(time);
        }
        this.$refs.article.scrollTop -= 200;
      }, 1)
    }

vue中异步和同步的方法

async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数

他返回的是一个promise的对象。得到它得用then

同步的函数

async 关键字差不多了，我们再来考虑await 关键字，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面

例子：

async getUserInfo({

commit,

state

}) {

let res = await getUser();

commit(GET_USERINFO, res)

},

async saveAddress({

commit,

state

}) {

 

if(state.removeAddress.length > 0) return;

 

let addres = await getAddressList(state.userInfo.user_id);

commit(SAVE_ADDRESS, addres);

},

then()的调用的使用：

async function timeout() {

return 'hello world'

}

timeout().then(result => {

console.log(result);

})

console.log('虽然在后面，但是我先执行');