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

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

主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

背景背景

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

解决解决

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

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

name: "statistics-explain",

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' },

component: ScorePreview

},

{

// 查看方案内容

path: 'planList/:planID',

name: 'score-plan-list',

meta: { text: '查看方案内容' },

component: ScorePlanList

},

{