Question

我正在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还是很陌生，因此我可以肯定我犯了一个愚蠢的错误，但是我花了太多时间试图弄清楚这一点，因此可以提供一些帮助。谢谢。

Answer 1

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

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

如果您仍要使用查询字符串（而不是路径参数），建议您更改为类似的内容...

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

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

将查询字符串变量作为道具传递给路线定义

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

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

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

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

1 个答案: