vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面

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

一.使用标签

需要注意的是,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");

}

新窗口的接收参数方法

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

}

vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面相关推荐

vue 按钮点击打开新页面_vue路由打开新窗口
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被组件指令替代,且不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2 ...
win7怎么打开html 文件夹,win7系统怎么设置一个窗口打开多个文件夹
我们常常在使用电脑的时候都会发现,一些用户在打开文件夹会发现我们不能同时在一个窗口下打开,用起来非常的不方便,那么你知道win7系统怎么设置一个窗口打开多个文件夹吗?下面是学习啦小编整理的一些关于wi ...
vue地址栏输入路由跳转到首页_Vue路由跳转到新页面时默认在页面最底部而不是最顶部的解决...
php截取字符串函数 public function sub_string($str, $len, $charset="utf-8") { if( !is_numeric($len ...
vue 内的对象获取键值对_vue.js - vue 登录存localStorage的方法
问题 methods: { login() { var user = this.user; var password = this.password; this.$http.post('http:/ ...
网站服务器打开新页面,什么网页适合新窗口打开？哪些网页又适合当前窗口打开？...
原标题:什么网页适合新窗口打开?哪些网页又适合当前窗口打开? 关于网页是新窗口打开好,还是当天窗口打开好,其实没有严格规定,主要根据网站内容来确定,有些网页需要新窗口打开,有些则不需要,今天四爷推就简 ...
网站用户体验研究:新窗口打开链接还是当前窗口打
网页到底是用新窗口打开好,还是用当前页打开比较好呢,这个恐怕是仁者见仁,智者见智了,接下来就粗浅的谈谈自己的看法. 先看这两种打开方式的利弊: 新窗口打开: 优点: 1)用户可以同时浏览多个页面,很方 ...
在HTML中,如何设置新窗口打开和在原窗口打开
在你连接的地方代码加上target="_blank" 新窗口打开target="_parent" 同一窗口打开或者不要加target="_paren ...
vue 判断权限过期_vue 路由权限
附上girhub 地址: loever/vue-FlexPaperViewergithub.com qq:3179689033 相互学习我把router.js 分成router.js 和route ...
实现应用软件能够通过运行窗口打开
实现应用软件能够通过运行窗口打 windows操作系统因图形界面丰富,被广大用户喜爱:打开某一个应用软件,只需要在桌面"左键双击"就可以完成,操作简单方便.对于系统自带的软 ...

vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面

vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面相关推荐

最新文章

热门文章