如何保存Vue路由器参数以防止用户手动修改？答案

【问题标题】：How to save Vue router params in order to prevent user from manually modifying?如何保存Vue路由器参数以防止用户手动修改？
【发布时间】：2020-11-05 12:00:24
【问题描述】：

我在我的 Vue 路由中传递了一些参数

{ path: '/page/:slug/:tab', name: 'page', component: page('page.vue') },

所以当我使用特定路径时，URL 看起来像这样：www.test.com/page/slug-text/active 其中 slug = slug-text 和 tab = active

它工作正常，我使用这些参数来使用“slug”从数据库中获取特定数据。我在页面中也有 4 个选项卡，所以我使用“选项卡”参数来显示当前选项卡。

  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.slug = this.$route.params.slug || null
      this.currentTab = this.$route.params.tab || null
      this.$store.dispatch('data/fetchSingle', this.slug)
    },
  }

我在这里面临的问题是当用户决定手动更改 URL 参数时。例如，当有人手动更改 URL 时：

www.test.com/page/slug-text/active

到这里：

www.test.com/page/slug-whatever/whatever

这意味着参数也会改变，它会影响我的 Vue 数据。例如。当前选项卡不起作用，因为我没有名为“whatever”的选项卡

谁能告诉我什么是防止这个问题的正确方法？

【问题讨论】：

这本身不是问题。拥有一条路线的想法是，您实际上可以创建这样的链接（尽管使用有效数据），以便它们可以作为常规链接工作。您需要做的是验证参数是否有效，如果无效，则返回错误。请参阅此处作为添加参数匹配的示例，然后其他所有内容都是 404 错误：router.vuejs.org/guide/essentials/…
谢谢你的答案。我可以检查数据是否有效，这不是问题。我只是在想是否可以让用户手动更改参数，从而导致 404 错误。这会是一个适当的解决方案吗？当用户手动修改 URL 中的参数时显示错误消息？ @NelsonRodriguez
恕我直言，是的，可以显示错误。因为您允许用户手动（如果他们愿意）移动到其他路线，这可能非常方便。如果他们输入错误，那么页面告诉他们找不到（或任何适当的错误），这很好

标签： javascript vue.js vue-router

【解决方案1】：

使用Vue.js时，可以观察到路由的变化。您可以通过添加钩子beforeRouteEnter、beforeRouteLeave 和beforeRouteUpdate 来实现它。在呈现页面之前，您可以在这些挂钩中检查您的 URL。如果参数不正确，您可以重定向到错误页面，或者将您的组件设置为“错误”状态，并警告用户。

我建议您阅读以下文档： https://router.vuejs.org/guide/advanced/navigation-guards.html

【讨论】：