vue 操作成功刷新本页面

浅浅的花香味﹌ 2021-09-08 16:10 269阅读 0赞

app.vue

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

import \{  
        get\_student\_detail,  
        confirm\_pay  
    \} from '../../model/student.js'

export default \{  
        name: 'Detail',  
        inject:\['reload'\],  
        data() \{  
            return \{  
                id: '',  
                stuinfo: ''  
            \}  
        \},  
        methods: \{  
            //定义方法  
            //确认收费  
            btnPay() \{  
                console.log(33)  
                Dialog.confirm(\{  
                        title: '消息提示',  
                        message: '确认操作吗？',  
                    \})  
                    .then(() => \{  
                        confirm\_pay(this.id).then(res=>\{  
                            if(res.code == 100000)\{  
                                Toast.success(\{  
                                    message: res.msg,  
                                    duration: 1.5 \* 1000  
                                \})  
                                setTimeout(()=>\{  
                                    this.reload()  
                                \},1500)  
                            \}else\{  
                                Toast.fail(\{  
                                    message: res.msg,  
                                    duration: 1.5 \* 1000  
                                \})  
                            \}  
                        \})  
                    \})  
                    .catch(() => \{  
                        // on cancel  
                    \});  
            \},

//拨号  
            callphone(phoneNumber) \{  
                window.location.href = 'tel://' + phoneNumber  
            \},  
            //点击返回  
            onClickLeft() \{  
                this.$router.back()  
            \}  
        \},  
        computed: \{  
            //计算属性

\},  
        watch: \{  
            //监听属性  
        \},  
        beforeCreate() \{  
            //console.log('beforeCreate函数......');  
        \},  
        beforeMount() \{  
            //mounted函数时页面标签的内容基本还没有渲染完成  
        \},  
        created() \{  
            //console.log('created函数......');  
            this.id = this.$route.params.id  
            get\_student\_detail(this.$route.params.id).then(res => \{  
                if (res.code == 100000) \{  
                    this.stuinfo = res.result  
                \} else \{  
                    Toast.fail(\{  
                        message: res.msg,  
                        duration: 1.5 \* 1000  
                    \})  
                \}  
            \})  
        \},  
        mounted() \{  
            //mounted函数时页面标签的内容基本已经渲染完成时调用这个函数  
        \},  
        beforeDestroy() \{  
            //console.log('beforeDestroy函数......');  
        \},  
        destroyed() \{  
            //console.log('destroyed函数......');  
        \},  
        beforeUpdate() \{  
            //当数据发生改变时，在标签没有被渲染之前触发  
        \},  
        updated() \{  
            //当数据发生改变时，在标签被渲染后触发  
        \}  
    \}  
</script>

.wm-myinfo .myinfo-p \{  
        font-size: 16px;  
        height: 20px;  
        line-height: 20px;  
        margin: 10px 15px;  
    \}

.wm-myinfo .my-phone \{  
        border-radius: 5px;  
        font-size: 12px;  
        line-height: 20px;  
        color: \#fff;  
        display: inline-block;  
        height: 20px;  
        width: 50px;  
        text-align: center;  
        float: right;  
        background-color: \#32e696;  
    \}

.wm-myinfo .myinfo-address \{  
        font-size: 16px;  
        line-height: 20px;  
        margin: 10px 15px;

.my-button \{  
        margin-top: 20px;  
    \}

/\* .my-button button \{  
        border: none;  
        background-color: \#1989FA;  
        width: 100%;  
        color: \#fff;  
        font-size: 16px;  
        height: 30px;  
        line-height: ;  
    \} \*/

</style>

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**1.场景**

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

**2.遇到的问题**

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

**3.解决方法**

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，**不论组件层次有多深**，并在起上下游关系成立的时间里始终生效。

**4.provide / inject 用法**

**provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。**