前端vue项目之路由监听

首先，一个页面可能会子路由，但是整个页面只有一部分是子路由展示区域，另外一部分则是公共区域，比如团队页面，一个团队有多个成员，对于团队来说，成员页面就算是团队页面的子路由，下面来看页面

假设红色部分为公共部分，绿色就是路由和子路由区域，紫色按钮是进入子路由页面，下面看子路由页面

 

 点击返回则回到父级路由页面，如何实现整个效果呢，首先父级路由的路径是settings/team,而子路由的路径是settings/team/xxx，路径不同，通过它作为标识绑定页面的结构上效果就可以实现了，那这边采用的方式是通过watch去监视路由的变化从而实现嵌入子路由的切换的方式，下面看代码：

<template v-if="!isHidden">
      //父页面
 </template>
<router-view v-else class="mt-5" />

通过标识isHdden绑定页面结构来切换页面

watch(
      () => root.$route,
      (val) => {
        const { path } = val;
        if (path === "/settings/team") {
          isHidden.value = false;
          navs.value = [root.$t('Team.Settings'), root.$t('Team.Team')];
        } else {
          isHidden.value = true;
        }
      }
    );

再通过watch来监视路由，从而实现页面能来回切换的效果，这就是监视路由的作用。