时间戳

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

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

问题描述

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

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

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

问题是第一页加载它没有加载模板。如果我单击主页链接，则没有任何反应。但是如果我点击关于或项目，页面会重新加载。（得到一个带有提示的 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");

标签： javascriptvue.jsvue-componentvue-routerreload

解决方案

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

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

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

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

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

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

推荐阅读