Vuejs2 使用不同筛选器重新打开同一页面的步骤

在我的Laravel 5/vuejs 2/VueRouter/app中，我有一个导航区：

        <li class="navigation_item_top">
            <router-link :to="{ name: 'DashboardIndex' }" class="a_link">
                Dashboard
            </router-link>
        </li>

        <li class="active navigation_item_top" >
            <a href="#backendCustomersSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Customers</a>
            <ul class="collapse list-unstyled ml-2" id="backendCustomersSubmenu">
                <li class="mt-2">
                    <router-link :to="{name : 'listCustomers'}" class="a_link">
                        Customers
                    </router-link>
                </li>
                <li class="mt-2">
                    <router-link :to="{name : 'listCustomers', params: { filter: 'new' } }" class="a_link">
                        New Customers
                    </router-link>
                </li>
                <li class="mt-2">
                    <router-link :to="{name : 'listCustomers', params: { filter: 'inactive' } }" class="a_link">
                        Inactive Customers
                    </router-link>
                </li>
            </ul>

        </li>

仪表板




客户


新客户


非活跃客户

其中有3个链接列出了具有不同默认过滤器打开页面的客户，如果从 仪表板索引页我移动到任何listCustomers

但是，如果我在打开的listCustomers页面中使用其他筛选器打开listCustomers，则它不起作用。 我想VueRouter会将所有listCustomers视为一个页面。

---

是否有办法做到这一点并选择其他列表客户重新打开过滤器？

不确定我是否非常了解您的Q，但我认为您希望：

将查询附加到url。e、 g

company.com/listCustomers？filter=new

让Vue注意到更改并对该更改采取措施

如果是这种情况，请尝试以下方法：

<template>
  <--! HTML HERE -->
</template>

<script>
   export default {

      watch: {

          '$route'(to, from){

             // you don't need this but just in-case.
             //this.$forceUpdate();

             //If you're using query like ?filter=new, this should work
             if (this.$route.query.filter) {
                if (this.$route.query.filter== 'new') {

                }else{

                }
             }


           }
      }

   }
</script>

导出默认值{
观察：{
“$route”（到，从）{
//你不需要这个，只是以防万一。
//这是.$forceUpdate（）；
//如果您使用的是像？filter=new这样的查询，这应该可以工作
if（此.$route.query.filter）{
if（this.$route.query.filter=='new'）{
}否则{
}
}
}
}
}

---

N.B

如果您希望使用参数，则表示您希望您的

url

为：

domain.com/listCustomers/inactive

因此，只需尝试以下基本内容和链接：

或

---

如果您想查询，您的

url

将是：

domain.com/listCustomers？filter=new

您应该通过exact

prop

激活活动页面样式

然后你需要注意手表挂钩的变化，就像我回答的那样

---

现在所有的人都说，

与参数的链接应该没有任何问题，但是如果您决定使用任何

导航卫士

技术，例如

路由器。每次之后

。 请不要忘记添加

next（）

，以便在您的代码之后继续。否则它将无法导航

阅读

---

我希望您能理解。

不，有1页，但有不同的筛选参数（任何是单独的菜单项），我需要用筛选重新打开它们changing@PetroGromovo是的，我理解那部分。我已经更新了我的答案，试试看。我已经定义了事件：router.afterEach（（to，from）=>{bus.$emit（'page_changed'，from，to）；}）；但当我使用相同的页面但不同的默认过滤器单击不同的菜单项时，page_changed事件不会以这种方式触发。还有别的办法吗？