当我们做一个分类标签的时候。比如这个样子的每个分类请求的数据不一样。我们在生命周期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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐