vue项目中实现链接跳转几种方法(打开新页面)

vue项目中实现链接跳转有哪些方法,如何在新页面打开,下面编程教程网小编带大家了解一下实现代码!

router-link跳转

// 直接写上跳转的地址
<router-link to="/index1">link跳转</router-link>
  
// 添加参数
<router-link :to="{path:'/index2', query:{id:1,name:'web'}}"></router-link>

// 新窗口打开
<router-link :to="{path:'/index3', query:{id:1,name:'web'}}" target="_blank"></router-link>

利用this.$router.replace跳转

toIndex (e) {
  this.$router.replace({name: '/index', params: {id: e}})
}

利用this.$router.push跳转

toIndex (e) {
  this.$router.push({name: "/index", params: {id: e}})
}

利用resolve跳转

toIndex (e) {
  const new = this.$router.resolve({name: '/index', params: {id: e}})
  window.open(new.href,'_blank')
}
以上是编程学习网小编为您介绍的“vue项目中实现链接跳转几种方法(打开新页面)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:vue项目中实现链接跳转几种方法(打开新页面)

基础教程推荐