Question

我是JavaScript框架的新手（尽管我使用Vanilla js或jquery（有点）），并且从我的项目开始使用VueJS。

我正在编写一个使用restful-api作为服务器的单页应用程序。

我希望标题中的某些链接出现在用户未登录（注册，登录）的情况下，并在登录后消失。当然，还会出现不同的链接集。

一点可视化:) 登录之前

HEADER => |注册（to ='/ register'）登录（to ='login'）

成功登录后

HEADER => |主页（to ='/'）个人资料（to ='/ profile'）SomeOtherLink（to ='/ someOtherPath'）

但是有时登录后，尽管标题正确显示（我检查并检查链接是正确的），但路径却出错。例如登录之前的第一个链接已注册，登录之后的第一个链接为home。当我敲回家时，它会注册。个人资料和登录名相同。当我单击配置文件时，它将转到/ login。但是第三个有效。

似乎以某种方式呈现（而不是）错误的eventListener链接。

这是我的模板。

...
            <ul class="navbar-nav">
                <template v-if="loggedIn">

                    <router-link :to="{name: 'Home'}"
                                 tag="li"
                                 class="nav-item"
                                 active-class="active">
                        <a class="nav-link"> Home </a>
                    </router-link>


                    <router-link to="/profile"
                                 tag="li"
                                 class="nav-item"
                                 active-class="active">
                        <a class="nav-link"> Profile </a>
                    </router-link>

                    <router-link :to="{name: 'SomeRoute'}"
                                 tag="li"
                                 class="nav-item"
                                 active-class="active">
                        <a class="nav-link"> SomeLink </a>
                    </router-link>

                </template>
                <template v-else>
                    <router-link :to="{name: 'Register'}"
                                 tag="li"
                                 class="nav-item"
                                 id="register-link"
                                 active-class="active">
                        <a class="nav-link"> Kayıt Ol! </a>
                    </router-link>
                    <router-link
                            :to="{name: 'Login'}"
                            tag="li"
                            class="nav-item"
                            id="login-link"
                            active-class="active">
                        <a class="nav-link"> Giriş Yap </a>
                    </router-link>
                </template>
            </ul>
...

这里loginIn是计算属性，如果用户登录，则将其设置为true，反之亦然。它可以正常工作。

我尝试使用div代替模板标签，但结果相同。我怎样才能解决这个问题？我在错误的地方吗？还是一个错误？

Answer 1

我打印了loginIn，它是正确的，正如我之前提到的。

问题不是，组件正确呈现。问题是我猜想的点击事件监听器。

为每个已解决的路由链接添加唯一密钥。

大多数可能会为每个链接创建一个事件侦听器，一旦旧链接被破坏并渲染了新链接，它将为新链接创建新的侦听器，但不会删除旧的监听器。由于链接中没有身份，因此会按顺序映射。用新的旧链接替换旧的链接后，它将具有两个侦听器，一个侦听器用于驻留在同一位置的旧链接，另一个用于侦听链接。因此，单击时会触发其中之一。实际上，这说明了为什么它先按预期工作的原因，刷新后工作不正确，而另一次刷新又正确地工作。

我不确定这是否是一个错误，但是看起来似乎唯一唯一的解决方案就是添加密钥。

使用v-if在标头中使用不同的路由链接会导致路由指向错误的路径

1 个答案: