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


基础教程推荐
猜你喜欢
- 使用单div实现CSS 绘图方法汇总 2023-12-28
- 微信小程序使用webview打开pdf文档以及显示网页内 2022-08-30
- Vue3怎么运用pinia状态管理工具 2025-01-13
- 关于ES6中的箭头函数超详细梳理 2022-08-30
- 纯css实现立体摆放图片效果的示例代码 2024-02-08
- react vue 等等这种mvvm思维的开发方式怎么编写通用组件,或者什么样的组件应该编写为通用组件 2023-10-08
- JavaScript实现简易聊天对话框(加滚动条) 2024-02-05
- js中.sort()函数的常见用法与高级操作 2023-07-09
- JQuery的ajax的用法在asp中使用$.ajax()实现 2024-01-05
- CSS清除浮动大全共8种方法 2023-12-27