Vue(小案例_vue+axios仿手機app)_圖文列表實現

一、前言                                                                                     

                                      1、導航滑動實現

                                      2、渲染列表信息時讓一開始加載的時候就請求數據

                                      3、根據路由的改變，加載圖文的改變(實現用戶訪問網站時可能執行的三個操作)

二、主要內容                                                                              

1、導航滑動實現：

　　（1）演示效果：

    

　　（2）代碼實現

<!--導航欄用ul li實現-->
            <ul>
                <li v-for='(item,index) in categoryList' :key='index'>
                    <a href="javascript:;">{{item.title}}</a>
                </li>
               
            </ul>
        </div>


<style>

li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}

 ul {
    /*強制不換行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
}

</style>

 

2、渲染列表信息時讓一開始加載的時候就請求數據

　　（1）在methods里面封裝一個請求的方法

 export default{
        name:'PhotoList',
        data(){
            return{
                categoryList,
                title_h:'圖文分享'
            }
        },

        methods:{
            loadImageByCategoryId(id){ //這里傳入請求的id
                this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d'+id)
                .then(res=>{
                     console.log(res.data.result.data)
                })
                .catch(err=>{
                    console.log('數據獲取失敗',err);
                })
            }

        }
    }

　　（2）在created()中最開始就調用這個方法

        created(){
       
             this.loadImageByCategoryId(0);//0表示所有的數據
             
             this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
            .then(res=>{
                
                console.log(res.data.result.data)
            })
            .catch(err=>{
                console.log('新聞數據獲取失敗',err)
            })
        }

　　（3）當圖片過多的時候需要設置圖片懶加載（n+1）模式，這里用mint-ui里面的v-lazy

//Mint-ui里面的圖片懶加載
<img v-lazy='item.img_url'>

 

 

 

3、根據路由的改變，加載圖文的改變（牽涉到動態路由的匹配：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#響應路由參數的變化）

　　官網上明確告訴我們：當路由從/user/foo 導航到 /user/bar, 原來的組件實例會被復用。因為兩個路由都渲染同一個組件，比起銷毀再創建，復用顯得更加高效。不過，這意味着組件的生命周期鈎子不會再被調用。復用組件時，如果想對不同的路由參數做出不同的響應的時候，此時可以用1）watch監聽  2）使用beforeRouteUpdate導航守衛

 

操作一：在當前網站中，直接在url輸入動態路由

　（1）下面用beforeRouteUpdate(to, from, next){ }來實現

 methods:{
            loadImageByCategoryId(id){ //這里傳入請求的id
                this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
                .then(res=>{
                     console.log(res.data.result.data)
                })
                .catch(err=>{
                    console.log('數據獲取失敗',err);
                })
            }

        },

        created(){
            //api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d
             this.loadImageByCategoryId(0);//0表示所有的數據

             this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
            .then(res=>{
                
                console.log(res.data.result.data)
            })
            .catch(err=>{
                console.log('新聞數據獲取失敗',err)
            })
        },

        beforeRouteUpdate(to, from, next){
            //在當前路由改變，但是該組價被復用時調用
            //舉例來說，對於一個帶有動態參數的路徑/foo/:id 在/foo/1 和 /foo/2之間跳轉的時候
            //由於會渲染同樣的Foo組件，因此組件實例會被復用。這個鈎子在這個時候就會被調用
            console.log(to);//to是目的
            this.loadImageByCategoryId(to.params.categoryId); //拿到里面的路由參數調用上面封裝的請求方法，就會根據不同的參數請求到不同類型的數據
        }
    }

 

 

操作二：很多時候通過點擊上面的滑動導航改變路由

　　（1）給每個導航li標簽注冊點擊事件，然后將當前的id傳進去

 

<div class="photo-header">
            <ul>
                <li v-for='(category,index) in categoryList' :key='index' @click='categoryHandler(category.id)'>
                    <router-link :to="category.routerName" exact @click.native ='changeHash()'>{{item.title}}</router-link>

                </li>
               
            </ul>
        </div>

 

　　（2）在method中定義這個categoryHandler點擊事件，

 categoryHandler(id){
            this.$router.push({name:'photo.list'}, params:{categoryId:id})  //當用戶點擊之后就會跳轉到這個路由，然后再執行beforeRouterUpdate方法

           },

　　（3）執行beforeRouteUpdate方法，重新根據不同路由參數請求數據

beforeRouteUpdate(to, from, next){
            //在當前路由改變，但是該組價被復用時調用
            //舉例來說，對於一個帶有動態參數的路徑/foo/:id 在/foo/1 和 /foo/2之間跳轉的時候
            //由於會渲染同樣的Foo組件，因此組件實例會被復用。這個鈎子在這個時候就會被調用
            console.log(to);//to是目的
            this.loadImageByCategoryId(to.params.categoryId); //拿到里面的路由參數調用上面封裝的請求方法，就會根據不同的數據請求到不同類型的數據
        }

 

操作三：用戶可能關閉了當前的網站，然后從瀏覽器另一個網頁中直接拿這個路由來刷新（這個時候路由沒有更新）

　　（1）用beforeRouteEnter

 beforeRouteEnter(to, from, next){
            //在渲染該組件的對應路由被confirm前調用
            //不能獲取組件實例this
            //因為當守衛執行前，組件實例還沒有被創建
            next(vm =>{
                vm.loadImageByCategoryId(to.params.categoryId)

            })
        },

 

 

結合以上三個操作就可以實現，通過點擊不同導航li標簽，渲染不同類型的數據， 可以通過在當前網站上輸入不同的動態路由參數，渲染不同的數據，還可以從別的網站進來，渲染不同的數據

 

三、總結                                                                                     

 

結合以上三個操作就可以實現，通過點擊不同導航li標簽，渲染不同類型的數據， 可以通過在當前網站上輸入不同的動態路由參數，渲染不同的數據，還可以從別的網站進來，渲染不同的數據