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");
}
}
最终效果