vue 按钮点击打开新页面_Vue中在新窗口打开页面及Vue-router的使用

背景

在开发提分加项目的过程中，遇到了点击下拉菜单时在新窗口中打开页面，由于之前一直做的是单页面应用，没有碰到过类似的需求，于是上网搜了一下解决办法，也再次系统地温习了一下vue-router。

解决

使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。

const {href} = this.$router.resolve({

name: "statistics-explain",

params: {

classID: id,

examSubjectID: this.planClassData.examSubjectID,

studentStatus: 0

}

});

window.open(href, '_blank');

延伸

•动态路由匹配：一个“路径参数”使用冒号:标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。

•嵌套路由：要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置，要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

export default {

path: '/scorep

vue 按钮点击打开新页面_Vue中在新窗口打开页面及Vue-router的使用相关推荐

vue 按钮点击打开新页面_vue路由打开新窗口
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被组件指令替代,且不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2 ...
vue是用a标签打开新页面_vue | 路由vue-router在新窗口打开页面
vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决一.使用标签需要注意的是,router-link并不支持 targe ...
按钮点击打开新页面_PDF怎么打开？如何制作一个PDF格式的文档？
不知你是否也一样,无论是在网上下载资料还是其他人发送的文件都是PDF格式的.但是应该如何打开PDF文件呢?如何自己制作一个PDF格式的文档呢? 首先说一下如何打开PDF格式的文件,电脑端就比较简单的, ...
vue是用a标签打开新页面_vue 在新窗口打开页面并设置不同的背景
开发一个新系统,前端用的vue,vue是单体应用,所有页面都在一个窗口里实现,但项目要求在点button链接后要新打开一个浏览器页面,解决方法如下: 1. 给此button设置新事件 @click=& ...
vue webpack 自动打开页面_vue中webpack技术详解
1.为什么要使用webpack: 因为我们想把资源整合.如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源,而index.htm ...
vue数组刷新_Vue中数组更新后，页面没有动态刷新问题
最近使用vue开发时,在一个函数中使用for循环,改变了页面中的数组,在函数中查看是修改成功的,但是页面中没有动态刷新. 在Vue的官方文档有提到这样一个注意事项: 数组变更检测注意事项: 由于 Ja ...
vue拦截器刷新登陆页面_vue 一刷新就退回登录页面了
写项目时,遇到一个问题就是,我配置好拦截器和路由拦截,没有报错,感觉可以,但是会到页面登录成功后,操作数据后,习惯性点击刷新,这时就退回到登录页面了,我知道是我清空存储的值,但是现在觉得用户万一刷新就 ...
vue中create 什么触发_vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的 ...
清空div中的内容而不刷新整个页面_Vue中的$nextTick机制
nextTick 出现的前提因为Vue是异步驱动视图更新数据的,即当我们在事件中修改数据时,视图并不会即时的更新,而是等在同一事件循环的所有数据变化完成后,再进行视图更新.类似于Event Loop ...

vue 按钮点击打开新页面_Vue中在新窗口打开页面及Vue-router的使用

vue 按钮点击打开新页面_Vue中在新窗口打开页面及Vue-router的使用相关推荐

最新文章

热门文章