为什么 Vue Router 在我单击链接之前不加载并在之后重新加载所有网页

Question

我得到了一个充满 Vue.component 实例的 components.js。

然后我得到了一个 main.js，其中有一个路由器，我正在使用这些组件来创建不同的页面。

在 index.html 我有路由器页面的链接。

问题是第一个页面加载它没有加载模板。如果我点击主页链接，什么也不会发生。但是，如果我单击“关于”或“项目”，页面将完全重新加载。（得到一个带提示的 iframe，它再次显示。）然后，单击关于或项目后，一切正常。

我尝试在新选项卡中手动打开 example.com/#/，但它是一样的。

main.js 就像：

const About = { template: '<div>About</div>' }                        

const Home = { template: `                                            

<web-header></web-header>                                             

` }

const Project = { template: '<div>Project</div>' }

                        

const routes = [                                                        

{ path: '/', component: Home },                                       

{ path: '/about', component: About },                                 

{ path: '/projects', component: Project }

]                                                                                                                  

const router = new VueRouter({                                       

routes: routes                                                    

})

                                                                                                                           

const app = new Vue({

  router

}).$mount("#app");

Answer 1

我终于找到了问题的根源。使用前未加载的组件。解决方案：在使用它们之前添加组件文件。Valorations：我习惯于在 body 结束标签之前添加我所有的脚本。在这种情况下，您必须在 head 结束标记之前添加组件全局实例文件。（因为如果您之前不加载组件实例，html kebab sintax 将无法正常工作）现在它工作正常。在这里，您获得了查看我所做更改的承诺。（只需移动标签）https://github.com/StringManolo/StringManolo.github.io/commit/fcc331dc5136fb8a0da5a4c979ab67c8b85365e7