Question

在我的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个链接列表具有不同默认过滤器打开页面的客户，如果来自 DashboardIndex页面我移到任何listCustomers。

但是，如果从打开的listCustomers页中打开带有其他过滤器的listCustomers，它将无法正常工作。我想因为VueRouter将所有listCustomers视为1页。是否有办法做到并选择其他listCustomers重新打开过滤器？

Answer 1

不确定我是否很好地理解您的 Q ，但我认为您想这样做：

将查询附加到url。例如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>

NB

如果要使用参数，则意味着您希望url为：

domain.com/listCustomers/inactive。

所以只需尝试一下基本知识并像这样链接：

<router-link to="/listCustomers/inactive">

或

<router-link to="/listCustomers/new">。

如果您要查询url，将是：

domain.com/listCustomers?filter=new。

，并且您应传递精确的prop来激活活动页面样式。

然后，您需要像我回答我一样注意监视钩的变化

现在已经说完了

与参数的链接应该可以正常工作，但是如果您决定使用任何Navigation Guards技术，例如router.afterEach。请不要忘记添加next()，以使其在代码之后继续运行。否则它将无法导航。

阅读Navigation Guards。

希望您能理解

使用不同的过滤器重新打开同一页面

1 个答案: