美文网首页全栈工程师
vue路由打开一个新的窗口

vue路由打开一个新的窗口

作者: pinbolei | 来源:发表于2018-12-06 16:28 被阅读0次

    简单说一下vue路由如何打开一个新的窗口
    关注我的个人博客:pinbolei.cn,获取更多内容

    1.router-link标签

    在vue的官方文档中

    图1-1

    看到这大家应该会想,既然router-link不支持target="_blank"属性,那我们该怎么用router-link打开一个新的窗口呢?别急,继续往下看~

    文档中还有一处描述


    图1-2

    router-link添加tag="li"属性后,居然可以变成li标签渲染出来,真特么神奇哈,那可不可以写成tag="a",从而去替代a标签呢?我们尝试着写一哈

    <router-link tag="a" target="_blank" to="/about">新品</router-link>
    

    2.编程导航

    图1-3

    上图是官网的最新说法,vue2.0以后router.gorouter.push就不支持新窗口打开的属性了,现在用一种新的方式router.resolve

    let routeData = this.$router.resolve({
      path: "/about",
      query: {
        name:'lei',
        age: 18,
        phoneNum:12345678901 
      }
    });
    window.open(routeData.href, '_blank');
    

    相关文章

      网友评论

        本文标题:vue路由打开一个新的窗口

        本文链接:https://www.haomeiwen.com/subject/civocqtx.html