本文摘自PHP中文网,作者coldplay.xixi,侵删。
vue.js中打开新页面的方法:1、【router-link】跳转,代码为【<router-link to="/detail/one">】;2、通过【this.$router.push】跳转。
【相关文章推荐:vue.js】
vue.js中打开新页面的方法:
1.router-link跳转
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<router-link to= "/detail/one" >
<span class = "spanfour" >link跳转</span>
</router-link>
<router-link :to= "{path:'/detail/two', query:{id:1,name:'vue'}}" >
</router-link>
id = this. $route .query.id
<router-link :to= "{path:'/detail/three', query:{id:1,name:'vue'}}" target= "_blank" >
</router-link>
```javascript
|
2.this.$router.push跳转
1 2 3 4 5 6 7 8 9 10 11 12 13 | ```javascript
toDeail (e) {
this. $router .push({path: "/detail" , query: {id: e}})
}
id = this. $route .query.id
toDeail (e) {
this. $router .push({name: "/detail" , params: {id: e}})
}
id = this. $route .params.id
|
3.this.$router.replace跳转
1 2 3 4 | toDeail (e) {
this. $router .replace({name: '/detail' , params: {id: e}})
}
|
4. resolve跳转
1 2 3 4 5 6 | resolve页面跳转可用新页面打开
2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了(这边应用:https:
toDeail (e) {
const new = this. $router .resolve({name: '/detail' , params: {id: e}})
window.open( new .href, '_blank' )
}
|
相关免费学习推荐:JavaScript(视频)
以上就是vue.js中怎么打开新页面的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
怎么检查vue.js是否安装成功了
vue.js与react.js区别是什么
vue.js基于什么
vue 手势组件教程
使用vue.js实现图像裁剪功能
vue.js中如何获取url的值
vue.js如何循环数组
vue.js如何给对象属性赋值呢
vue.js怎么用swiper
vue.js一般用在什么地方
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue.js中怎么打开新页面