Question

面对这样的问题 - 我将数据发送到/ router-link / tag的道具，当我点击链接时，我转到文章，它获取数据，一切正常。好吧，如果按下＆＃34;返回＆＃34;按钮在浏览器中，然后＆＃34;转发＆＃34;没有文章，会有没有数据的空字段。如何避免这种情况？

这是文章的链接

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

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

再一次，数据传输很好，当您点击链接时，会显示所有内容。问题是当点击浏览器中的按钮＆＃34;返回＆＃34;和＆＃34;前进＆＃34; - 未保存浏览器历史记录。

有谁知道问题的解决方案，或者我可以阅读如何解决它？

谢谢！

Answer 1

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

但是，当您单击浏览器然后单击前进按钮时，单击<router-link>并不会像第一次那样进行到文章路径的转换，并且因为这些参数不包含在路径中＃＆ 39; s路径，$route.params将为空。

我猜你只是试图将数据从一条路线传递到另一条路线。如果您希望它在历史状态更改（即浏览器后退/前进）中保持不变，则可以：

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

实际上，您的网址只需要包含文章的ID，例如item。所有其他类似的东西，如类型/名称/等，都不属于URL。从ID中，您应该能够从REST API（XHR请求）获取完整的文章对象，或者从一些内存中的数据存储抽象（Vuex或其他任何其他内容）获取它。

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

1 个答案: