el-menu router点击打开独立的新窗口 router/index.js中的配置

想实现一种效果，当点击‘Echart’时， router-view中不渲染，而是打开新窗口，并且这个页面脱离router-view，独立显示。

 

 那么 router/index.js中需要

import Vue from 'vue';
import Router from 'vue-router';
import deviceManagementRouter from './modules/mainLink'

Vue.use(Router)


export const constantRoutes = [
    deviceManagementRouter,
        {
            path: '/chart',
            component: () => import('../views/chart'),   // 需要独立显示的页面
            hidden: true
        }
    ]

const createRouter = () => new Router({
    scrollBehavior: () => ({
        y: 0
    }),
    routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
}

export default router

通过新建一个全新的 Router，然后将新的 Router.matcher 赋给当前页面的管理 Router，以达到更新路由配置的目的。

html中

js中，这是网上找到的方法

selectMenu(index, indexPath) {
    if (indexPath[0] === "#train") {
                //选择了确认,到测验页中去组卷,这里只要新窗口打开相应的测验页
                let routeData = this.$router.resolve({
                    //去掉开头防使用index做router的#符
                    path: "/chart" .replace("#", "")
                });
                window.open(routeData.href, "_blank");
    }
}

最终效果