时间戳

首页 > 解决方案 > 浏览器导航未在 Vue.js 应用程序中加载组件

javascript - 浏览器导航未在 Vue.js 应用程序中加载组件

问题描述

我正在 Vue.js 中构建一个单页应用程序。目前，在您尝试使用浏览器导航按钮（后退/前进）之前，网站导航正常工作。

当尝试使用这些导航时，不会创建任何页面。URL 将更改，但不会加载任何组件，除非您备份到加载组件的基本 URL。

模板根本没有加载，我也有没有显示错误的 ESlint。

这是路由器的 index.js：

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'search',
      component: Search,
    },
    {
      path: '/results?terms=:terms',
      name: 'results',
      component: Results,
    },
    {
      path: '/review?id=:id',
      name: 'review',
      component: Review,
    },
  ],
});

我使用以下方法更改页面：this.$router.push({ name: 'results', params: { terms: this.terms } });

我对 Vue 很陌生，所以我很确定我只是犯了一个愚蠢的错误，但是我花了太多时间试图解决这个问题，所以一些帮助会很好。谢谢。

标签： javascriptvue.js

解决方案

这里的问题是路由参数不应该作为查询字符串参数传递。它们仅供在 URL路径中使用。

出于某种原因，路由器能够处理编程导航，但不能处理直接 URL 加载。

如果您仍想使用查询字符串（而不是路径参数），我建议您更改为这样的...

  1. 为您的组件定义道具，例如

    export default {
  name: 'Results',
  props: ['terms'],
  // etc

  2. 在路由定义中将查询字符串变量作为道具传递

    {
  name: 'results',
  path: '/results',
  component: Results,
  props: route => ({ terms: route.query.terms })
}

  3. 在程序化导航中设置query而不是params

    this.$router.push({ name: 'results', query: { terms: this.terms } })

推荐阅读