路由问题 Vue.js 2 和浏览器历史记录

Question

遇到这样的问题-我发送数据到/router-link/标签的props，当我点击link，我去文章，它获取数据，一切正常。那么，如果您在浏览器中按下 "back" 按钮，然后 "forward" 将没有文章，将出现没有数据的空字段。如何避免这种情况？

这是link文章

<h3 class="database-article__title">
    <router-link
        :to="{name : 'article',params: {
        id: item.id ,
        type:item.type ,
        name: item.name,
        text: item.text,
        author: item.author,
        isFavorite: item.isFavorite
    }}"> {{item.name}} </router-link>
</h3>

文章的一小部分-template.vue

<div class="content-type marketing">
    {{$route.params.type}}
</div>

<h3 class="database-article__title">
    {{$route.params.name}}
</h3>

<div class="database-article__text">
    {{$route.params.text}}
</div>

再次，数据传输良好，当您单击 link 时，所有内容都会显示。问题是当点击浏览器中的按钮 "back" 和 "forward" - 浏览器历史没有保存。

有谁知道问题的解决方法，或者我在哪里可以阅读解决方法？

谢谢！

Answer 1

我的猜测是您的 article 路由没有在其路径中指定任何这些参数。当你点击 link 时，vue-router 会记住你在 <router-link> 中指定的 params 对象，并且可以通过文章组件中的 $route.params 访问。

但是，当您单击浏览器的后退按钮和前进按钮时，不会像第一次那样通过单击 <router-link> 过渡到文章路径，并且由于这些参数未包含在路由的路径，$route.params 将为空。

我猜您只是想将数据从一条路线传递到另一条路线。如果您希望它在历史状态更改（即浏览器 back/forward）中持续存在，则：

数据需要包含在 URL 中，作为参数（例如 /article/:id/:type 等，这需要在路由路径中预先指定）或在查询字符串中（例如 /article?id=1&type=foo).这不是这种情况的理想选择。
（推荐）以任何路由都可以访问的方式存储 item 对象。 Vuex 是一种方法，但这可能有点矫枉过正。

实际上，您的 URL 应该只需要包含文章的 ID，例如 /article/1。 type/name/etc 等所有其他内容不属于 URL。从 ID 中，您应该能够从 REST API（XHR 请求）中获取完整的文章对象，或者从内存中的数据存储抽象（Vuex 或其他任何东西）中获取它。

路由问题 Vue.js 2 和浏览器历史记录

Trouble with routing Vue.js 2 and browser history

vue.js

vue-router