Vue之路由

時間 2019-11-18

原文原文鏈接

1. SPA是什麼
單頁Web應用（single page application，SPA），就是隻有一個Web頁面的應用，
是加載單個HTML頁面，並在用戶與應用程序交互時動態更新該頁面的Web應用程序javascript

單頁面應用程序：
只有第一次會加載頁面, 之後的每次請求, 僅僅是獲取必要的數據.而後, 由頁面中js解析獲取的數據, 展現在頁面中
傳統多頁面應用程序：
對於傳統的多頁面應用程序來講, 每次請求服務器返回的都是一個完整的頁面

優點
減小了請求體積，加快頁面響應速度，下降了對服務器的壓力
更好的用戶體驗，讓用戶在web app感覺native app的流暢css

2. 經過vue的路由可實現多視圖的單頁Web應用(基於html的SPA)
2.1.0 引入依賴庫
<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>html

2.2 建立自定義組件，例如：Home和Abort組件
const Home = Vue.extend({});vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>
    </head>
    <body>
        <!--實例一： 路由器基本實例 -->
        <!-- 實例二：vue中導航中的後退-前進-編程式導航 -->
        <div id="app">
            <h1>{{ts}}</h1>
            <div>
                <router-link to="/home" >go to home</router-link>
                <router-link to="/about">go to About</router-link>
                <router-link to="/about" tag="li">go to About</router-link>

            </div>
            
            <div>
                <button @click="previous()">前進</button>
                <button @click="next()">後退</button>
                <button @click="gotopage()">切換組件</button>
                
            </div>


            <div>
                <router-view></router-view>
            </div>


        </div>

        <script type="text/javascript">
            //重點:
            //1.傳統頁面跳轉是經過鏈接的方式
            //2.VUe經過路由（name,path）跳轉組件
            //3.



            //1.引入依賴庫(vue.js和vue-router.js)
            //2.自定義組件
            const Home = Vue.extend({
                //必需要定義一個根節點或元素包裹裏面的內容
                template: '<div><h1>Home組件<div>Home組件的內容區域</div><h1/></div>'

            })


            const About = Vue.extend({
                //必需要定義一個根節點或元素包裹裏面的內容
                template: '<div><h1>About組件<div>About組件的內容區域</div><h1/></div>'

            })

            //3.定義路由(即路線）)
            var routes = [{
                    path: '/about',
                    component: About,
                    
                },
//                 {
//                         path: '/',
//                         component: About,
//                         
//                     },
                {
                    path: '/home',
                    component: Home,
                    name:'home'
                }
            ];

            //4.建立路由器實例,而後傳routes配置
            const router = new VueRouter({routes});


            //5.建立和掛載根實例
            var vm = new Vue({
                //el: "#app", 
                router: router,
                data: {
                    ts: new Date().getTime(),
                },
                methods: {
                    previous: function() {
                        this.$router.go(1); //前進
                        console.log("previous");
                    },
                    next: function() {
                        this.$router.go(-1); //後退
                        console.log("next");
                    },
                    gotopage:function(){
                        this.$router.push({
                        //    name:"home"
                        path:'/about'
                        })
                    }
                }

            }).$mount("#app");
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

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