figo20121231
2021-01-08 14:18
采纳率: 50%
浏览 135

vuejs刷新页面跳转的问题

各位大侠,我用elementui写了一个组件:返回成功后刷新页面,然后跳转到指定的el-menu,

代码如下:

<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect" >

<el-menu-item @click="daohang1" index="1"  >今日动态</el-menu-item>

<el-menu-item @click="daohang2" index="2"  >关注收藏</el-menu-item>

</el-menu>

<el-container v-show="dh1">1111</el-container>

<el-container v-show="dh2">2222</el-container>

methods:{

daohang1(){this.dh1=true;this.dh2=false;},

daohang2(){this.dh2=true;this.dh1=false;},

successok(response) {

                                     if(response===1){

                                                                 this.$router.go(0);//这是刷新页面的代码,是有效的,返回成功后页面也刷新了。

                                                                 this.daohang2();//这个代码就无效了,只有我点击时才有效

                                                                  ........

data(){

           return {dh1:false,dh2:false}

 

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • PythonJavaC++go 2021-01-08 16:15
    已采纳

    代码直接食用

    这里的button实现的是你 successok函数

    <template>
      <div>  
                <el-button type="primary" @click="successok(1)" >ceshi</el-button>
        <div>
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect1" >
    
            <el-menu-item @click="handleSelect1(1, [])" index="1"  >今日动态</el-menu-item>
    
            <el-menu-item @click="handleSelect1(2, [])" index="2"  >关注收藏</el-menu-item>
    
            </el-menu>
    
            <el-container v-if="isSwitch">1111</el-container>
            <el-container v-else>2222</el-container>
        </div>
      </div>
    
    </template>
    
    <script>
      export default {
        data() {
          return {
            isSwitch: true,
          };
        },
    methods: {
    successok(response) {
              if(response===1){
                 this.handleSelect1(2, [2]);//这个代码就无效了,只有我点击时才有效
                                          }},
    
    handleSelect1(key, keyPath) {
            if (key == 1) {          
              this.isSwitch = true
            }else{
              this.isSwitch = false
            }
            console.log(key, keyPath);
          }
        }
      }
    </script>
    已采纳该答案
    打赏 评论
  • 白日有梦 2021-01-08 14:39

    应该是因为 this.$router.go(0); 这个刷新了页面,影响了后面的  this.daohang2 执行

    打赏 评论
  • 白日有梦 2021-01-08 14:41

    为什么需要刷新页面尼?

     

    打赏 评论
  • 打杂的程序员 2021-01-08 14:41

    全局变量了解一下,在this.$router.go(0);之前设置一个全局变量,在页面加载的时候判断这个全局变量是不是为空,为空默认显示第一个,不为空的话加载全局变量的页面。

    打赏 评论
  • nicodeme 2021-01-08 14:47

    最好是,default-active的值设置一个变量,监听这个变量,根据这个变量去控制显示哪一个

    打赏 评论
  • PythonJavaC++go 2021-01-08 14:50

    交换一下顺序?

     

    打赏 评论
  • PythonJavaC++go 2021-01-08 15:05

    把v-show改成v-if,一个变量控制就可以了

    另外,v-if可以保证你的1111、和2222是显示在同一行。

    如果你是v-show的话,1111、 2222 是在不同行。

    v-show、 v-if功能相近,区别在于渲染时机

    打赏 评论
  • 热心市民周某 2021-01-08 15:33

    你都要跳转页面了还刷新干啥

    打赏 评论

相关推荐 更多相似问题