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 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
10分钟学会js处理json的常用方法
Dec 06 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公用函数列表[正则]
2007/02/22 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
python开发之函数定义实例分析
2015/11/12 Python
查看Django和flask版本的方法
2018/05/14 Python
flask中的wtforms使用方法
2018/07/21 Python
浅析Python函数式编程
2018/10/06 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python的flask框架难学吗
2020/07/31 Python
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
测量工程专业求职信
2014/02/24 职场文书
廉洁自律承诺书
2014/03/27 职场文书
体育教师求职信
2014/06/30 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
在校学生证明格式
2015/06/24 职场文书
教师培训简讯
2015/07/20 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS