一、spa應用解釋?

? ? ? ?全稱是single page application（單頁面應用），即我們訪問頁面時，只有index.html文件和一個static文件夾，但就是這個些靜態(tài)文件能使我們看到十分豐富的頁面效果，目前企業(yè)級的管理系統(tǒng)大多數(shù)都是應用此開發(fā)模式，接下里就是介紹一個html如何展現(xiàn)出全部網(wǎng)站內(nèi)容的原理。

二、神奇的index.html

?重點是在<div id="app"> 上，注意，雖然訪問的是index.html 但是程序的入口并不是這個，而是我們的main.js 文件

三、程序的入口

?

?入口處的這個函數(shù)的意思就是 用id選擇器把index.html是app的div給替換掉，替換成import導入進來的APP組件，那么接下來就看APP.vue組件做了什么事情。

四，app.vue?

?app的組件，第一步就是定義一個展現(xiàn)的容器，第二部就是<router-view>的一個占位路由表，當在瀏覽器上輸入路由之后，根據(jù)路由路由表中查找這個路由有沒有注冊，如果注冊則跳轉到路由對應的頁面上，路由表則定義在router文件下的index.js文件中，所以在main方法中可以看到import同樣導入了router。

五、router下的index.js

在路由表中定義了兩個路由 第一個是Home，而Home則是import的Home組件，同樣about是About組件，那就繼續(xù)看HOME組件吧

六、home.vue

?

?可以看到home.vue又引入了helloWorld組件，那繼續(xù)探索homeworld組件做了什么操作吧

七、helloworld.vue

可以看到里面定義了大量的鏈接（為了顯示 export 合并了一些） 頁面上應該是會顯示從父組件傳過了的字符串“Welcome to Your Vue.js App”? 可以看到是從Home傳過來的，那我們接下來揭開index.html所帶來的精彩吧。

八、‘’神奇‘’的頁面

?

總結

以上是生活随笔為你收集整理的Vue SPA工作原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。