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

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。

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

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

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

2. 将查询字符串变量作为路由定义中的 props 传递

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

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

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