浏览器的回退和导航栏的选中转态不同步,路由在新窗口打开

问题1:浏览器的回退和导航栏的选中状态不能同步的问题

问题:用户后退时候,左边导航栏显示的还是上一个页面的导航,但是路由和页面已经变了

   <div class="con-box">
      <ul class="con-box-ul">
        <li
          class="con-box-ul-li"
          v-for="(v, i) in headerList"
          :key="i"
          :class="v.url === tempUrl ? 'active' : ''"
          :default-active="activePathFn"
          @click="getHeader(v)"
        >
          <p>{{ v.name }}</p>
        </li>
      </ul>
    </div>
    //解决办法:(或者使用监听进行处理)
		 computed: {
		    activePathFn() {
		      return (this.tempUrl = this.$route.path)
		    },
		  },

解决:使用计算属性并设置:default-active=“activePathFn”

问题二:vue中某一个页面需要在新窗口中打开

解决1·:编程式路由

  const routeData = this.$router.resolve({ path: '/homeOperat' })
    window.open(routeData.href, '_blank')
    

//遇到的问题,点击之后会跳到一个拼接的地址,并不是想要的
在这里插入图片描述
查找之后发现:注释掉base就可以解决了
在这里插入图片描述

解决2·:跳转式路由

<router-link :to="{path:'/home'}" target="_blank"></router-link>
//要是不生效,加上一个tag=“a”
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值