关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

vue-router 在新窗口打开页面

发布时间:2023-06-29 14:00:24

vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决

数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

Vue权限系统案例

个人博客地址

一.使用标签

需要注意的是,router-link并不支持 target=“_blank” 属性,所以需要tag="a"属性把router-link渲染成标签

详情页

   

二.使用编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是router.go,但是vue2.0以后,这种方式就不支持新窗口打开的属性了,

1.使用 $router.resolve 这种方法能够实现新窗口打开, isService是事件调用

isService(val) {  const params = { id: val };  let routeData = this.$router.resolve({  name: "List",  query: params,  });  window.open(routeData.href, '_blank'); }

   

2.使用 $router.resolve带参数在新窗口打开

isService(val) {  const params = { id: val };  let routeData = this.$router.resolve({  path: `/details/${val}`,  query: params  });  window.open(routeData.location.path, "_blank"); }

   

3.新窗口的接收参数方法

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();//重新加载数据  }  } }

   



/template/Home/leiyu/PC/Static