vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址
需要注意的是,router-link并不支持 target=“_blank” 属性,所以需要tag="a"属性把router-link渲染成标签
详情页
有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是router.go,但是vue2.0以后,这种方式就不支持新窗口打开的属性了,
isService(val) { const params = { id: val }; let routeData = this.$router.resolve({ name: "List", query: params, }); window.open(routeData.href, '_blank'); }
isService(val) { const params = { id: val }; let routeData = this.$router.resolve({ path: `/details/${val}`, query: params }); window.open(routeData.location.path, "_blank"); }
created() { if (this.$route.params) { this.active = this.$route.params.id; this.init(); } }, watch: { $route(to, from) { //监听路由是否变化 if (to.params.id != from.params.id) { this.active = to.params.id; this.init();//重新加载数据 } } }
Copyright © 2023 leiyu.cn. All Rights Reserved. 磊宇云计算 版权所有 许可证编号:B1-20233142/B2-20230630 山东磊宇云计算有限公司 鲁ICP备2020045424号
磊宇云计算致力于以最 “绿色节能” 的方式,让每一位上云的客户成为全球绿色节能和降低碳排放的贡献者