一、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>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SPA練習</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> </div> <script> /* 需要大家創建一個SPA，這個SPA有3個組件，分別對應的是collect/detail/order 功能需求： 在地址欄中路由地址是: /myColllect --> 收藏頁組件 /myDetail --> 詳情頁組件 /myOrder --> 訂單頁組件 */ /* 1、引入js文件 2、創建三個組件,需要返回值 3、路由詞典配置(三小步)const myRoutes、const myRouter、router:myRouter, 4、指定一個盛放代碼片段的容器 <router-view></router-view> */ var testCollect = Vue.component("collect",{ template:` <div> <h1>這是收藏頁</h1> </div> ` }) var testDetail = Vue.component("detail",{ template:` <div> <h1>這是詳情頁</h1> </div> ` }) var testOrder = Vue.component("order",{ template:` <div> <h1>這是訂單頁</h1> </div> ` }) const myRoutes = [ {path:"",component:testCollect}, {path:"/myColllect",component:testCollect}, {path:"/myDetail",component:testDetail}, {path:"/myOrder",component:testOrder}, ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>