Vue中在新窗口打开页面及Vue-router的使用


Posted in Javascript onJune 13, 2018

背景

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

Vue中在新窗口打开页面及Vue-router的使用

Vue中在新窗口打开页面及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');

延伸

参考文章:Vue Router

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

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

export default {
path: '/scoreplus',
name: 'scoreplus',
component: { template: '<router-view />' },
redirect: { name: 'scoreplus-index' },
children: [
 {
 // 查看个人方案
 path: 'preview/:examSubjectID/:xuexinID/:recordsID/:constitute/:planID',
 name: 'score-preview',
 meta: { text: '个人方案' },
 component: ScorePreview
 },
 {
 // 查看方案内容
 path: 'planList/:planID',
 name: 'score-plan-list',
 meta: { text: '查看方案内容' },
 component: ScorePlanList
 },
 {
 // 下载方案内容
 path: 'download/:planID/:classID',
 name: 'score-download-list',
 meta: { text: '下载方案内容' },
 component: DownloadList
 },
 {
 // 查看推送试题
 path: 'push/:planID/:level',
 name: 'score-question-push',
 meta: { text: '查看推送试题' },
 component: QuestionPush
 },
 {
 // 提分方案首页
 path: '',
 name: 'scoreplus-index',
 component: ScoreIndex
 }
]
}

•编程式导航

1.router.push(location, onComplete?, onAbort?):想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

在 2.2.0+,可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

2.router.replace(location, onComplete?, onAbort?):跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

3.router.go(n):这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

•命名路由:可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象。

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

•重定向和别名

1.重定向(redirect):

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
 })

2.别名:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

const router = new VueRouter({
 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]
 })

总结

以上所述是小编给大家介绍的Vue中在新窗口打开页面及Vue-router的 使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
vue实现放大镜效果
Sep 17 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 #Javascript
js replace 全局替换的操作方法
Jun 12 #Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 #Javascript
js实现购物车功能
Jun 12 #Javascript
浅谈Node.js 中间件模式
Jun 12 #Javascript
浅谈Webpack打包优化技巧
Jun 12 #Javascript
关于TypeScript模块导入的那些事
Jun 12 #Javascript
You might like
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python函数形参用法实例分析
2015/08/04 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python3获取cookie常用三种方案
2020/10/05 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
本科生详细的自我评价
2013/09/19 职场文书
老师对学生的评语
2014/04/18 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
电影红河谷观后感
2015/06/11 职场文书
教师见习总结范文
2015/06/23 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
Win11更新失败并提示0xc1900101
2022/04/19 数码科技