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项目中实现链接跳转几种方法(打开新页面)
基础教程推荐
猜你喜欢
- jquery点击缩略图切换视频播放特效代码分享 2024-01-05
- css 单选按钮图标替换的方法 2024-03-31
- HTML+CSS+JS实现堆叠轮播效果的示例代码 2024-01-21
- 「HTML+CSS」--自定义加载动画【025】 2023-10-27
- Jquery Ajax请求文件下载操作失败的原因分析及解决办法 2022-10-17
- vue中的条件渲染 v-show、v-if、v-else、v-else-if 2023-10-08
- CSS 实现蜂巢/六边形图集的示例代码 2023-12-20
- wepy小程序如何引入echarts统计图 2022-10-29
- 使用ajax异步提交表单的几种方法总结 2023-01-26
- 无法解决西里尔问题.用htmlspecialchars / PHP / MySQL的 2023-10-26