当我们做一个分类标签的时候。比如这个样子的每个分类请求的数据不一样。我们在生命周期mounted钩子函数中通过axios请求到了数据。但是需要手动刷新页面,数据才会显示。怎么做才能不用手动就可以自动刷新呢。其实非常简单……步骤如下:

1、通过mounted钩子函数获取后端数据

 2、页面刷新问题。vue中有3种方式刷新页面

  this.$router.go(0)     location.reload()     provide/inject 

    这里我们用this.$router.go(0)方法

3、点击分类标签自动刷新问题。

我们只需要找到分类标签在上面加上一个点击方法然后让其刷新即可。

   <el-menu-item v-for="cate in categories" :key="cate.id" :index="cate.id.toString()" @click="newLink">
    <i class="el-icon-menu"></i>
    <span slot="title">{{ cate.name }}</span>
</el-menu-item>

.
.
.
<script>
    export default {
        name: 'index',
        data(){
            return{
                categories: '',
            }
        },
        mounted(){
            this.$axios.get('后端url连接').then('数据请求成功处理').catch('数据请求失败处理')
        },
        methods: {
            newLink(){
                this.$router.go(0)
            }
        }
    }
</script>

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐