vue手撸移动端后台（8）页面传参和数据删除

上篇我们知道了怎么获取多条数据，这篇来看看如何获取一条数据和删除数据。

1. 获取单个数据

上篇我们列出了用到的接口，但是只使用了获取多条数据的，这次我们试着获取单条数据
http://jsonplaceholder.typicode.com/users/1

在用户列表，我们点击一条数据，进入用户详情页面，src/views/users下创建一个UserInfo.vue页面用来展示用户信息

这里就涉及到一个传参的问题，userinfo页面需要获取到当前用户的id，然后在页面加载用户信息，我们观察下页面传参的方式

1.1 创建页面

先创建一个空的文件

<template>
    <!-- eslint-disable -->
    <div></div>
    <!-- eslint-enable -->
</template>
<script>
export default {}
</script>
<style scoped>
</style>

1.2 注册页面

在router.js中注册这个页面，推荐在注册页面的时候，写上name参数，虽然默认name是可以省略的【name参数会影响到router的mode=‘history’】

    {
        path: '/userInfo/:id',
        name: 'userInfo',
        component: _import('views/users/UserInfo')
    },

1.3 User.vue页面修改

在列表增加点击事件

<van-cell v-for="user in users"
                              :key="user.id"
                              :title="user.name"
                              @click="gotoUserInfo(user.id)" />

1.4 页面传参并跳转

页面传参其实有多种方法，我们一个一个实现

No.1
使用name + params方式1【推荐】
在router.js配置路由：path: '/userInfo/:id'，对应的浏览器地址栏请求为:http://xxx/userInfo/123
页面跳转的方式：this.$router.push({ name: 'userInfo', params: { id: 123 } })
或者在页面使用：<router-link :to="{ name:'userInfo',params: { id: 123}}" ></router-link>
这样进入到子页面之后，刷新页面，参数等还存在

No.2
使用name + params方式2
与方式的区别就是在path配置的时候，不带参数path:'/userInfo'
其他的一样，这样也是可以跳转的，但是有个问题，刷新页面之后，参数会丢失，所以不推荐

No.3
使用path + query方式
路由配置不带参数path:'/userInfo'
传参的时候：this.$router.push({ path: '/userInfo', query: { id: 123 } })
地址栏的样式为：http://xxx/userInfo?id=123

1.5 userinfo接收参数

userinfo页面接收参数的方式：

    created() {
        console.log('id:', this.$route.params.id)
    }

2. 删除数据

列表左滑删除数据，用到了van-swipe-cell模块，改造一下users页面的列表

<van-list v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
        <van-swipe-cell :right-width="65"
                        :on-close="onClose"
                        v-for="(user,idx) in users"
                        :key="user.id"
                        :title="user.name">
            <van-cell-group @click="gotoUserInfo(user.id)">
                <van-cell :title="user.name"
                          :value="user.id" />
            </van-cell-group>
            <span class="van-swipe-right"
                  @click="delUser(user.id,idx)"
                  slot="right">删除</span>
        </van-swipe-cell>
    </van-pull-refresh>
</van-list>

方法：【列表onload方法，我只调用一次，因为数据重复，key会提示一个格式错误，不影响使用，但是看起来不美好】

delUser(id, idx) {
    // 删除一条数据， 实际业务这里应该调用api接口，我就省略了。
    this.users.splice(idx, 1)
},
onClose(clickPosition, instance) {
    // 滑块回弹
    if (clickPosition === 'outside' || clickPosition === 'cell') {
        instance.close()
    }
},

style样式：

.van-swipe-right {
    color: white;
    font-size: 15px;
    width: 65px;
    height: 44px;
    display: inline-block;
    text-align: center;
    line-height: 44px;
    background-color: red;
}

效果：

以上