如何让路由跳转至新页面？

如何让路由跳转至新页面？

在工作中写了一个前台项目，用的是vue2，遇到了一个问题，就是有些跳转需要跳转至新页面，解决以后总结一下

一.关于路由跳转，如何让他跳转至新页面？

<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面</router-link>

直接给router-link加入target="_blank"即可

对于NavMenu 导航菜单组件如何让他跳转至新页面？

由于NavMenu是通过router属性激活路由模式，且通过index去进行跳转，而我们如果需要跳转至新页面的话，则需要摒弃这种方式，即把router模式关闭

如何解决？

1.绑定select事件， 即菜单激活回调，并且router属性

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">

2.封装函数

methods: {
  handleSelect (key, keyPath) {
    const url = this.$router.resolve({
      path: key
    })
    window.open(url.href, '_blank')
  }
}

解释

1.key 即是路径，keyPath返回的是一个路径数组

2.this.$router.resolve可以将路由路径解析成路由对象，即url是一个路由对象

3.window.open是原生的js的语法，能够跳转，设置是否跳转新页面，传参等