Javascript 如果我去'/联系人'；，我想保留以前的routes视图，但显示模式

所以在我的网站设计中，没有专门的联系页面。相反，当单击a/contact链接时，我需要显示一个模态。我可以用传统的方式来做，但我希望这样做：

a） 如果有人直接登录到“”，则默认为主页视图，并自动显示模式

b） 如果访问者已经在站点上，然后激活了/联系路线，则会保留他们当前所在的视图，例如/about，然后在/about视图顶部显示模式

---

我一直在使用Vue路由器在新的Vue 2安装中尝试解决这个问题，但就是无法解决，我发现用谷歌搜索很困难。

试试下面的代码片段，尽管我不完全确定如何演示直接导航到

/contact

Vue.use（VueRouter）
const contactGuard=功能（到、从、下一个）{
如果（to.name==='contact'）{
此.$root.$emit（'modal'，true）
下一个（假）
}否则{
下一个（）
}
}
常数路由=[{
路径：“/”，
姓名：'家'，
组成部分：{
模板：`主页
`，
离开前：联系警卫
}
},
{
路径：'/about'，
姓名：'关于'，
组成部分：{
模板：`关于页面
`，
离开前：联系警卫
}
},
{
路径：'/contact'，
姓名：'联系人'，
beforeEnter:（到、从、下一个）=>{
if（from.path）{
//我们来自另一页
此.$root.$emit（'modal'，true）
下一个（假）
}否则{
//我们已直接导航到/联系
下一个({
替换：正确，
路径：“/”，
查询：{
联系人：对
}
})
}
}
}
]
常量路由器=新的VueRouter({
路线
})
路由器.beforeach（（到、从、下一个）=>{
下一步（vm=>{
if（to.query.contact）{
vm.$root.$emit（'modal'，true）
}
})
})
新Vue({
el:“#应用程序”，
路由器，
数据（）{
返回{
模态：假
}
},
安装的（）{
此。$on（'modal'，show=>{
this.modal=show
})
}
})

。模式掩码{
位置：固定；
z指数：9998；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,5）；
显示：表格；
过渡：不透明度。3s缓解；
}
.模态包装器{
显示：表格单元格；
垂直对齐：中间对齐；
}
.集装箱{
宽度：300px；
保证金：0px自动；
填充：20px 30px；
背景色：#fff；
边界半径：2px；
盒影：0 2px 8px rgba（0,0,0,33）；
过渡：全部。3秒轻松；
字体系列：Helvetica、Arial、无衬线字体；
}
.模态头h3{
边际上限：0；
颜色：#42b983；
}
.模态体{
利润率：20px0；
}
.模式默认按钮{
浮动：对；
}
/*
*以下样式将自动应用于具有
*切换其可见性时的transition=“modal”
*由Vue.js编写。
*
*通过编辑，您可以轻松地使用模式转换
*这些款式。
*/
.模态输入{
不透明度：0；
}
.调休有效{
不透明度：0；
}
.modal输入.modal容器，
.modal保持活动状态。modal容器{
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}

家


关于


接触


默认标题
默认主体
默认页脚
好啊

只是想提供另一种方法。区别在于它保留路由（不更改为查询），并且不依赖jQuery

它的工作方式是，它（也）依赖于beforeEnter来调整路线信息

我没有使用在路由中定义组件的默认方式，而是将其放入元中。这使得从

从

复制到

到

/contact

路由使用

showContact

元来确定是否显示覆盖

例如：

const routes = [
  { path: '/', meta: { component: Home } },
  { path: '/bar', meta: { component: Bar } },
  {
    path: '/contact',
    meta: { showContact: Contact, component: null },
    beforeEnter: (to, from, next) => {
      if (from.matched[0]) {
        to.meta.component = from.matched[0].components.default;
      }
      next();
    },
  },
];

最后一位是，我没有使用

，而是使用

来显示组件

并显示联系方式：

或`

下面是一个没有任何样式的沙箱示例：

---

啊！好吧，我明白了！使用jQuery显示模式可以很好地工作。谢谢：）你知道如何让模态显示为一个.vue组件吗？显然，这样我就可以将所有逻辑分离到模态vue组件中，并且不会让代码在每个页面上执行，至少在需要时是这样。您知道我如何访问主App.vue中的query.contact吗？我正在考虑使用v-if=“query.contact”调用组件“”@DigitalDrifter@JonathanPort应该很容易将引导模式替换为类似的模式。您可以通过

$route.query

访问当前路由查询参数。太棒了！非常感谢，为这些愚蠢的问题道歉。我对Vue很陌生。从PHP/Laravel background@digitaldriver很难让我动脑