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项目中实现链接跳转几种方法(打开新页面)


猜你喜欢
- Vue实现当前页面刷新的4种方法举例 2024-01-15
- 浅谈CSS中浮动float带来的高度塌陷问题及4种解决方案 2023-12-13
- javascript获取元素CSS样式代码示例 2024-02-21
- 关于CSS中的display:table-cell使用技巧的几种应用 2024-02-04
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-27
- 爬取今日头条Ajax请求 2023-02-23
- 两个table实现固定表头拖动时仅限表体移动 2024-02-20
- css控制超链接(css超链接样式) 2024-01-04
- 如何用JavaScipt测网速 2023-12-24
- CSS使用技巧20则 2022-10-16