记一下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('虽然在后面，但是我先执行');