Vue路由

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

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

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

2. SPA實現思路和技術點
1 ajax
2 錨點的使用（window.location.hash #）
3 hashchange 事件 window.addEventListener("hashchange",function () {})
4 監聽錨點值變化的事件，根據不一樣的錨點值，請求相應的數據
5 本來用做頁面內部進行跳轉，定位並展現相應的內容

 

Vue中路由的使用

一、確保引入Vue.vue-router的js依賴

<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>

 

二、首先須要定義組件（就是展現不一樣的頁面效果）

const Home = Vue.extend({
            template:'<div><p>這是一個home組件</p></div>'
        });
        const About = Vue.extend({
            template:'<div><p>這是一個About組件</p></div>'
        });

 

三、須要將不一樣的組件放入一個容器中（路由集合）

/* 定義路由 */
        //存放路徑URL與組件額對應關係
        var routes = [{
            path: '/Home',
            component: Home,
            },
            {
                path: '/About',
                component: About,
                }
            ];

 

四、將路由集合組裝成路由器

//組裝路由器
            let router=new VueRouter({
                routes
                });

 

五、將路由掛載到Vue實例中

 

new Vue({
            el:"#app",
            router,
            data(){
                return{
                    msg:'hello'
                }
                
            }
        })

 

 

 

六、跳轉

<router-link to="/Home" replace>go to Home</router-link>
                <router-link to="/About">About me</router-link>

 

replace
設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，導航後不會留下 history 記錄。
<router-link :to="{ path: '/home'}" replace></router-link>

vue中導航中的後退-前進-編程式導航
this.$router.go(-1) ：表明着後退
this.$router.go(1)：表明着前進
this.$router.push({ 切換到name爲home的路由
name:'home'
});