为什么 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