vue的tags组件router-link标签跳转已打开页面不重新加载数据,有什么好方法吗?

gothBoiClique
  • 23

现在就是打开A页面和B页面,然后在B页面修改完数据,A页面也需响应,这时点击TAGS上的A页面标签过去时,A页面是不会重新加载数据的。目前可以在A页面用activate写created的方法解决,但是问题是页面非常多,每个页面添加的话会非常耗时以及代码整洁度差,所以请问是否有什么方法改一个地方就好的?

tags代码也放下吧
<template>

<div class="tags" v-if="showTags">
    <ul>
        <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
            <router-link :to="item.path" class="tags-li-title">
                {{item.title}}
            </router-link>
            <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
        </li>
    </ul>
    <div class="tags-close-box">
        <el-dropdown @command="handleTags">
            <el-button size="mini" type="primary">
                标签选项<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu size="small" slot="dropdown">
                <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                <el-dropdown-item command="all">关闭所有</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</div>

</template>

回复
阅读 3.1k
1 个回答

已找到更改全局的方法了,找到引入router-view标签的地方,然后改成:
<router-view :key="key"></router-view>

 computed: {
    //绑定唯一KEY,每次切换路由重新加载页面
    key() {
        return this.$route.name !== undefined? this.$route.name + new Date(): this.$route + new Date()
    }
 }
 但是这样做有个缺点就是消耗性能,就算没有关联数据的页面也是会被刷新到的,所以大家自己斟酌
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏