为什么 Vue Router 直到我点击链接并重新加载所有网页后才加载答案

【问题标题】：Why Vue Router not loading until i click link and reloads all webpage afterwards为什么 Vue Router 直到我点击链接并重新加载所有网页后才加载
【发布时间】：2020-08-03 18:43:09
【问题描述】：

我得到了一个包含 Vue.component 实例的 components.js。

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

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

问题是第一个页面加载它没有加载模板。如果我单击主页链接，则没有任何反应。但是，如果我单击 About 或 Project，页面会完全重新加载。（得到一个带有提示的 iframe，它再次显示。）然后，点击 About 或 Project 后一切正常。

我尝试在新选项卡中手动打开 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");

【问题讨论】：

你需要看路线。
哦，我是使用 Vue 的新手。我应该在哪里使用观察者？
观察路线，以便对路线变化做出反应 E.g const Home = { template: '...', watch: { $route(to, from) { // react to route changes... } } }
在路由文件中注册的每个文件中查看路由
还是有同样的问题。

标签： javascript vue.js vue-component vue-router reload

【解决方案1】：

我终于找到了问题的根源。使用前未加载的组件。

解决方案：在使用之前添加组件文件。

估价：我习惯于在正文结束标记之前添加我的所有脚本。

在这种情况下，您必须在头部结束标记之前添加组件全局实例文件。（因为如果您之前不加载组件实例，html kebab sintax 将无法正常工作）

现在它工作正常。在这里，您可以查看我所做的更改。（只需移动标签）

https://github.com/StringManolo/StringManolo.github.io/commit/fcc331dc5136fb8a0da5a4c979ab67c8b85365e7

【讨论】：