一、SPA的概述
SPA（single page application）單頁面應用程序，在一個完成的應用或者站點中，只有一個完整的html頁面，這個頁面有一個容器，可以把需要加載的代碼片段插入到該容器中。
SPA的工作原理：
eg: http://127.0.0.1/index.html#/start
①根據地址欄中url解析完整的頁面：index.html
加載index.html
②根據地址欄中url解析#后的路由地址： start
根據路由地址，去在當前應用的配置中 找該路由地址的配置對象去查找該路由地址 所對應的模板的頁面地址
發起異步請求加載該頁面地址
③把請求來的數據加載到指定的容器中
二、通過VueRouter來實現一個SPA的基本步驟
①引入對應的vue-router.js(該文件我已經上傳到我的文件中)
②指定一個盛放代碼片段的容器
<router-view></router-view>
③創建業務所需要的各個組件
④配置路由詞典
每一個路由地址的配置對象（要加載哪個頁面...）
const myRoutes = [ {path:'/myLogin',component:TestLogin}, {path:'/myRegister',component:TestRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter })⑤測試
在地址欄中 輸入對應的不同的路由地址 確認是否能夠加載對應的<!doctype html>
<html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script><!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p><!--通過router-view指定盛放組件的容器 --> <router-view></router-view> </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>這是我的登錄頁面</h1> </div> ` }) var testRegister = Vue.component("register",{ template:` <div> <h1>這是我的注冊頁面</h1> </div> ` }) //配置路由詞典 //對象數組 const myRoutes =[ //當路由地址：地址欄中的那個路徑是myLogin訪問組件 //組件是作為標簽來用的所以不能直接在component后面使用 //要用返回值 //path:''指定地址欄為空：默認為Login頁面 {path:'',component:testLogin}, {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] const myRouter = new VueRouter({ //myRoutes可以直接用上面的數組替換 routes:myRoutes }) new Vue({ router:myRouter, //或者： /* router:new VueRouter({ routes:[ {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] }) */ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body></html>
新聞熱點
疑難解答
圖片精選
