Vue.js本来是为了编写单页项目而由尤大大发明出来的,宗旨是在同一页进行整个项目的编写,而利器就是局部路由跳转,通过路由跳转模拟新窗口的打开,name如果要在单页项目中需要重新打开一个新的弹出页面如何搞呢,并且新页面需要满足独立的一套路由,还要与远路由入口相关联。同时保持两个页面都可以独立刷新,这里就用到了丰富的地址栏操作大法,并没有任何安全性危险:
原路由 /main
子路由 /First
现在要由子路由跳转到一个新窗口,满足以上条件,
我们可以这么搞:
window.open("./?from=ins#/linkCx")
那么在linkCx页面如何搞呢,我们可以这么搞:
<template> <div> <div class="app-Cxconten clearfix"> <!--头部--> <CxHeaderCmp></CxHeaderCmp> <!--侧边栏--> <CxSideBarCmp class="fl" style="width:20%;" :clientH="clientH" :style="{ height: contentH + 'px' }"></CxSideBarCmp> <!----> <router-view :style="{ height: contentH + 'px' }" style="width:80%;" class="contents-bg-color fl" :class="{ marginL50: isToggleSideBar, 'constuhe': !isToggleSideBar }" > </router-view> </div> </div> </template>
要保持独立刷新,我们可以在app.vue中这么来搞:
{ if (location.hash.indexOf("linkCx") > 0) { this.$router.push("/linkCx"); } else this.$router.push("/main");
通过location.hash属性来判断当前路由在哪里,进行区分,刷新的时候就会自动判断跳到 /linkCx 还是 /main,这样就搞定了。