SPA（single page application）

時間 2019-11-11

標籤 spa single page application 简体版

原文原文鏈接

1、SPA的概述html

SPA（single page application）單頁面應用程序，在一個完成的應用或者站點中，只有一個完整的html頁面，這個頁面有一個容器，能夠把須要加載的代碼片斷插入到該容器中。vue

SPA的工做原理：
　　eg: http://127.0.0.1/index.html#/start
①根據地址欄中url解析完整的頁面：index.html
　　加載index.html
②根據地址欄中url解析#後的路由地址： start
　　根據路由地址，去在當前應用的配置中找該路由地址的配置對象去查找該路由地址所對應的模板的頁面地址
　　發起異步請求加載該頁面地址
③把請求來的數據加載到指定的容器中vue-router

2、經過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},app

            {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 --> 訂單頁組件
    */
    /*
        一、引入js文件
        二、建立三個組件,須要返回值
        三、路由詞典配置(三小步)const myRoutes、const myRouter、router:myRouter,
        四、指定一個盛放代碼片斷的容器
                    <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>

相關標籤/搜索

application@allowbackup

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。