介绍
这篇文章将为大家详细讲解有关Vue中如何在新窗口打开页面及使用Vue-router,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>背景
在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下Vue-router。
<强>解决
使用路由对象的解决方法解析路由,可以得到的位置,路由器,href等目标路由的信息。得到href就可以使用窗口。打开开新窗口了。
const {href}=,这。美元router.resolve ({
,名字:“statistics-explain",
,参数:{
,classID: id、
,examSubjectID: this.planClassData.examSubjectID,
,studentStatus: 0
,}
});
window.open (href, & # 39;平等# 39;); <强>延伸
参考文章:Vue路由器
?动态路由匹配:一个“路径参数”使用冒号:标记。当匹配到一个路由时,参数值会被设置到。route.params美元,可以在每个组件内使用。
?嵌套路由:要在嵌套的出口中渲染组件,需要在VueRouter的参数中使用孩子配置,要注意,以/开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。
export default {
路径:& # 39;/scoreplus& # 39;
名称:,& # 39;scoreplus& # 39;
组件:{,模板:& # 39;& lt; router-view /祝辞& # 39;,},
重定向:{,名字:& # 39;scoreplus-index& # 39;,},
孩子们:,(
,{
,//查看个人方案
,路径:& # 39;预览/:examSubjectID/: xuexinID/: recordsID/:构成/:planID& # 39;
,名字:& # 39;score-preview& # 39;
,元:{,文字:& # 39;个人方案& # 39;,},
,组件:ScorePreview
},
,{
,//查看方案内容
,路径:& # 39;planList/: planID& # 39;
,名字:& # 39;score-plan-list& # 39;
,元:{,文字:& # 39;查看方案内容& # 39;,},
,组件:ScorePlanList
},
,{
,//下载方案内容
,路径:& # 39;下载/:planID/: classID& # 39;
,名字:& # 39;score-download-list& # 39;
,元:{,文字:& # 39;下载方案内容& # 39;,},
,组件:DownloadList
},
,{
,//查看推送试题
,路径:& # 39;推动/:planID/:水平# 39;
,名字:& # 39;score-question-push& # 39;
,元:{,文字:& # 39;查看推送试题& # 39;,},
,组件:QuestionPush
},
,{
,//提分方案首页
,路径:& # 39;& # 39;
,名字:& # 39;scoreplus-index& # 39;
,组件:ScoreIndex
,}
]
} <>强?编程式导航
1. router.push(位置、>//,字符串
router.push(& # 39;回家# 39;)//,对象
router.push({,路径:& # 39;回家# 39;,})//,命名的路由
router.push ({name:大敌;& # 39;用户# 39;,,参数:,{,标识:123年,}})//,带查询参数,变成,/注册?=私人计划
router.push({,路径:& # 39;注册# 39;,,查询:,{,计划:& # 39;私人# 39;,}})
在2.2.0 +可选的在路由器。推动或路由器。取代中提供> & lt; router-link :=皗,名字:& # 39;用户# 39;,,参数:,{,标识:123年,}}“祝辞User
router.push ({name:大敌;& # 39;用户# 39;,,参数:,{,标识:123年,}})
<强大?重定向和别名
1。重定向(重定向):
, const router =, new VueRouter ({
,路线:[
,{,路径:& # 39;/一个# 39;,,重定向:,& # 39;/b # 39;,}
,)
之前,}) 2。别名:/的别名是/b,意味着,当用户访问/b时,URL会保持为/b,但是路由匹配则为/,就像用户访问/一样。
, const router =, new VueRouter ({
,路线:[
,{,路径:& # 39;/一个# 39;,,组件:,,,别名:,& # 39;/b # 39;,}
,)
之前,})
