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

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

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

因此，当我使用特定路径时，URL如下所示： 其中slug=slug text，tab=active

它工作得很好，我使用这些参数，以便使用“slug”从数据库中获取特定数据。 我在页面中还有4个选项卡，因此我使用“tab”参数来显示当前选项卡

  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”的选项卡

---

有人能告诉我预防此问题的正确方法吗？

使用

Vue.js

时，可以观察路线的变化。您可以通过添加hook

beforeRouteEnter

、

beforeRouteAve

和

beforeRouteUpdate

来实现它。在呈现页面之前，可以在这些钩子中检查URL。如果参数不正确，您可以重定向到错误页面，或者将组件设置为“错误”状态，并警告用户

我建议您阅读以下文件：

---

这本身不是问题。拥有路由的想法是，您实际上可以创建此类链接（尽管使用有效数据），以便它们可以作为常规链接使用。您需要做的是验证参数是否有效，如果无效，则返回错误。这里是一个添加参数匹配的示例，其他所有内容都是404错误：答案是Thx。我可以检查数据是否有效，这不是问题。我只是在想，是否允许用户手动更改参数，从而导致404错误。这是一个合适的解决方案吗？当用户手动修改URL中的参数时，是否显示错误消息@Nelson Rodriguezimho是的，可以显示错误。因为您允许用户手动（如果他们愿意）移动到其他路线，这非常方便。如果他们键入了错误的内容，那么页面告诉他们找不到（或任何适当的错误）就好了