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");
    }
}

最終效果