vue-router

最近整理vue的開發心得；就閒着沒事想着寫點東西幫助新手一下

vue-router這究竟是什麼；這是我剛接觸的時候的真實反映；啥是router；到底有什麼含義 後來我看了下官方文檔，看了一下簡單的項目，各類百度;原來router就至關因而用一個路徑記錄咱們到底該顯示什麼頁面的功能。個人理解是就是根據hash值；經過對hash值進行map;而後找到hash值相對應的界面 可能之前咱們本身寫路由是這樣的

（我以前學習的路由是從這段代碼來理解的）

/*
**使用方法
*       1：註冊路由 : spaRouters.map('/name',function(transition){
                        //異步加載js 
                        spaRouters.asyncFun('name.js',transition)
                        //或者同步執行回調
                        spaRouters.syncFun(function(transition){},transition)
                    })
        2：初始化      spaRouters.init()
        3：跳轉  href = '#/name'           
*/
(function() {
    var util = {
        //獲取路由的路徑和詳細參數
        getParamsUrl:function(){
            var hashDeatail = location.hash.split("?"),
                hashName = hashDeatail[0].split("#")[1],//路由地址
                params = hashDeatail[1] ? hashDeatail[1].split("&") : [],//參數內容
                query = {};
            for(var i = 0;i<params.length ; i++){
                var item = params[i].split("=");
                query[item[0]] = item[1]
            }       
            return  {
                path:hashName,
                query:query
            }
        }
    }
    function spaRouters(){
        this.routers = {};//保存註冊的全部路由
        this.beforeFun = null;//切換前
        this.afterFun = null;
    }
    spaRouters.prototype={
        init:function(){
            var self = this;
            //頁面加載匹配路由
            window.addEventListener('load',function(){
                self.urlChange()
            })
            //路由切換
            window.addEventListener('hashchange',function(){
                self.urlChange()
            })
            //異步引入js經過回調傳遞參數
            window.SPA_RESOLVE_INIT = null;
        },
        refresh:function(currentHash){
            var self = this;
            if(self.beforeFun){ 
                self.beforeFun({
                    to:{
                        path:currentHash.path,
                        query:currentHash.query
                    },
                    next:function(){
                        self.routers[currentHash.path].callback.call(self,currentHash)
                    }
                })
            }else{
                self.routers[currentHash.path].callback.call(self,currentHash)
            }
        },
        //路由處理
        urlChange:function(){
            var currentHash = util.getParamsUrl();
            if(this.routers[currentHash.path]){
                this.refresh(currentHash)
            }else{
                //不存在的地址重定向到首頁
                location.hash = '/index';
                location.reload();
            }
        },
        //單層路由註冊
        map:function(path,callback){
            path = path.replace(/\s*/g,"");//過濾空格
            Debugger.log(callback);
            if(callback && Object.prototype.toString.call(callback) === '[object Function]' ){
                this.routers[path] ={
                    callback:callback,//回調
                    fn:null //存儲異步文件狀態
                } 
            }else{
                console.trace('註冊'+path+'地址須要提供正確的的註冊回調')
            }
        },
        //切換以前一些處理
        beforeEach:function(callback){
            if(Object.prototype.toString.call(callback) === '[object Function]'){
                this.beforeFun = callback;
            }else{
                console.trace('路由切換前鉤子函數不正確')
            }
        },
        //切換成功以後
        afterEach:function(callback){
            if(Object.prototype.toString.call(callback) === '[object Function]'){
                this.afterFun = callback;
            }else{
                console.trace('路由切換後回調函數不正確')
            }
        },
        //路由異步懶加載js文件
        asyncFun:function(file,transition){
           var self = this;
           if(self.routers[transition.path].fn){
                self.afterFun && self.afterFun(transition)  
                self.routers[transition.path].fn(transition)
           }else{
               Debugger.log("開始異步下載js文件"+file)
               var _body= document.getElementsByTagName('body')[0]; 
               var scriptEle= document.createElement('script'); 
               scriptEle.type= 'text/javascript'; 
               scriptEle.src= file; 
               scriptEle.async = true;
               SPA_RESOLVE_INIT = null;
               scriptEle.onload= function(){ 
                   Debugger.log('下載'+file+'完成')
                   self.afterFun && self.afterFun(transition)   
                   self.routers[transition.path].fn = SPA_RESOLVE_INIT;
                   self.routers[transition.path].fn(transition)
               } 
               _body.appendChild(scriptEle);        
           }        
        },
        //同步操做
        syncFun:function(callback,transition){
            this.afterFun && this.afterFun(transition)
            callback &&　callback(transition)
        }

    }
    //註冊到window全局
    window.Routers = new spaRouters();
})()

好了廢話很少數；我會結合上邊的代碼與vue-router結合來解釋

vue-router官網

先來個最基礎的

<router-link> 至關於<a href=''#"></a>可是更強大

<router-link to='/home'>至關於直接跳到#/home</router-link>
	<router-link :to="{ path: 'home' }">也至關於直接跳到#/home</router-link>
	也許你想問那如何傳遞參數的呢
        有時候想不讓router-link渲染成a
        tag屬性<router-link :to="{ path: 'home' }"  tag="li"> tag屬性；渲染寫成li標籤</router-link>
        <router-link :to="{ path: 'register', query: { id: '1111' }}">帶參數傳遞</router-link>

而後在另外一個頁面你能夠這樣獲取

this.$router.push({
        path:'路徑'，
        query:{
          
            id：‘參數Id’
        }
    })
		 data(){
		 	return {
		 		id:this.$route.query.id
		 	}
		 }

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還能夠內嵌本身的 <router-view>，根據嵌套路徑，渲染嵌套組件;配合 <transition> 和 <keep-alive> 使用。若是兩個結合一塊兒用，要確保在內層使用 <keep-alive>

<!--
 <transition>
     <keep-alive>
        <router-view></router-view>
     </keep-alive>
 </transition>
 -->

那麼問題來了；<transition> 和 <keep-alive>究竟是幹嗎的呢； (ps:最開始我看github上項目的時候；由於沒有看vue-router;致使我就是一臉懵逼十臉懵逼直到百萬臉懵逼的那種) 官方給transition叫作過渡動效 。。。。。。。。。。。。。歇一歇明天再寫