vue.js - 使用 v-if 在标头中使用不同的路由链接会导致路由到错误的路径

Question

我是 JavaScript 框架的新手（尽管我使用了 vanilla js 或 jquery（一点点）），我从 VueJS 开始我的项目。

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

我希望在标题中如果用户未登录（注册，登录）会出现一些链接，一旦登录就会消失。当然，会出现不同的链接集。

有点可视化:) 登录前

标题 => | 注册(to='/register') 登录(to='login')

登录成功后

标题 => | Home(to='/') Profile(to='/profile') SomeOtherLink(to='/someOtherPath')

但有时，登录后，虽然标题正确呈现（我查看检查并且链接正确），但路径错误。例如登录前的第一个链接是注册，登录后的第一个链接是主页。当我单击主页时，它会进行注册。个人资料和登录名相同。当我单击配置文件时，它会转到 /login。但第三个有效。

似乎以某种方式呈现（不）错误的链接事件监听器。

这是我的模板。

...
            <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>
...

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

我尝试使用 div 而不是模板标签，但结果是一样的。我怎样才能解决这个问题？我在错误的地方吗？或者它是一个错误？

标签： vue.jssingle-page-applicationvue-router

Answer 1

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

问题不在于，组件正确渲染。问题是我想的点击事件监听器。

为每个路由链接添加唯一密钥解决了问题。

vue 很可能为每个链接创建一个事件监听器，一旦旧链接被销毁并呈现新链接，它会为新链接创建新监听器，但不会删除旧链接。由于链接中没有标识，因此它按顺序映射。一旦旧链接被新链接替换，它就会有两个监听器，一个用于保留在同一位置的旧链接，一个用于链接。因此，单击时会触发其中一个。实际上它解释了为什么它首先按预期工作，在刷新工作错误之后，在另一次刷新之后再次正常工作。

我不确定这是否是错误，但添加密钥似乎是唯一且真正的解决方案。