利用vue-cli配合vue-router搭建一個完整的spa流程（二）

時間 2019-11-10

標籤利用 vue cli 配合 router 搭建一個完整 spa 流程简体版

原文原文鏈接

上篇文章太長了，編寫時拖動太麻煩，重開一篇。
利用vue-cli配合vue-router搭建一個完整的spa流程（一）vue

在（一）中寫到了主要頁面的編寫，如今開始三個路由頁面的編寫。ajax

第一步：路由實例index.js

先貼出代碼。vue-router

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import tem from '@/components/showone'
import tem_cont from '@/components/showtwo'
import tem_error from '@/components/error'

//安裝插件
Vue.use(Router)
Vue.use(VueResource)

export default new Router({
    routes:[
        {
            path:"/user/:list/:listNum",
            component:tem,
            children:[
                {
                    path:"con",
                    component:tem_cont
                }
            ]
        },
        {
            path:"/user/error",
            component:tem_error
        }
    ]
})

代碼很短，一一解釋下。vue-cli

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import tem from '@/components/showone'
import tem_cont from '@/components/showtwo'
import tem_error from '@/components/error'

↑ 這裏是引入全部使用的數據，參數。npm

//安裝插件
Vue.use(Router)
Vue.use(VueResource)

↑ 這裏說下 vue-resource 這個一開始沒有安裝，打開項目右鍵打開Git 鍵入 npm install vue-resource --save
這是一個ajax插件，使用起來比較方便並且很簡單。segmentfault

routes:[
    {
        path:"/user/:list/:listNum",
        component:tem,
        children:[
            {
                path:"con",
                component:tem_cont
            }
        ]
    },
    {
        path:"/user/error",
        component:tem_error
    }
]

↑ 路由配置，詳情頁面是主頁面的子路由。app

第二部：三個路由xxxx.vue文件編寫

Ⅰ： showone.vue

先貼出代碼，有些複雜，慢慢解釋。函數

<template>
    <div style='cursor:pointer;height: 867px;' >
        <div v-show='routerData.mainShow'>
            <nav class='navbar navbar-default'>
                <div class='container' style="padding: 0;">
                    <div class='collapse navbar-collapse' style="padding: 0;">
                        <ul class='nav navbar-nav userNav'>
                            <li><a v-bind:class="{activeBg:isActive==0}" v-on:click='link(0)'>首頁</a></li>
                            <li><a v-bind:class="{activeBg:isActive==1}" v-on:click='link(1)'>頁面一</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class='media' v-for='(item,index) in routerData.showData' v-on:click='go(item,index)'>
                <div>
                    <div class='media-left'>
                        <img class='media-object' v-bind:src='item.thumbnail'>
                    </div>
                    <div class='media-body'>
                        <h2 class='media-heading' v-text='item.title'></h2>
                        <span style='font-size:25px;color:#ccc'>{{item.content | more}}</span>
                    </div>
                </div>
            </div>
        </div>
        <router-view v-bind:router-nesting='routerData'></router-view>
    </div>
</template>
<script>
    import router from '.././router'
    export default{
        props:["routerData"],
        data(){
            return {
                isActive:this.$route.path.slice(6,7)
            }
        },
        methods:{
            go(obj,index){
                router.push({path:this.$route.path+"/con",query:{type:index}});
            },
            link(num){
                var listNum=this.$route.path.slice(6,7);
                if(listNum!=num){
                    router.push("/user/"+num+"/0");
                    this.isActive=this.$route.path.slice(6,7);
                }
            }
        },
        filters:{
            more(value){
                var newMessage=value.slice(0,40)+"........點擊查看更多";
                return newMessage;
            }
        }
    }
</script>
<style>
    .activeBg{
        background-color: teal;
        color: white !important;
        transition: 0.5s all ease-in;
    }
    .userNav :hover{
        background-color: cornsilk;
        color: black !important;
    }
</style>

template有倆部分組成：vue-resource

<div v-show='routerData.mainShow'>
    <nav class='navbar navbar-default'>
        <div class='container' style="padding: 0;">
            <div class='collapse navbar-collapse' style="padding: 0;">
                <ul class='nav navbar-nav userNav'>
                    <li><a v-bind:class="{activeBg:isActive==0}" v-on:click='link(0)'>首頁</a></li>
                    <li><a v-bind:class="{activeBg:isActive==1}" v-on:click='link(1)'>頁面一</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class='media' v-for='(item,index) in routerData.showData' v-on:click='go(item,index)'>
        <div>
            <div class='media-left'>
                <img class='media-object' v-bind:src='item.thumbnail'>
            </div>
            <div class='media-body'>
                <h2 class='media-heading' v-text='item.title'></h2>
                <span style='font-size:25px;color:#ccc'>{{item.content | more}}</span>
            </div>
        </div>
    </div>
</div>

↑ 這是第一部分，包含導航與當前分類中所有內容的一個列表。this

①： v-show='routerData.mainShow' 這個控制總體部分顯示隱藏，與上一頁，下一頁按鈕爲相同的控制數據，由於兩者顯示，隱藏邏輯是同樣的。都是在詳情頁隱藏，主頁顯示。

②： v-on:click='link(0)' 導航按鈕跳轉綁定的函數。

③： v-for='(item,index) in routerData.showData' 循環數據，渲染列表。

④： v-on:click='go(item,index)' 每一個列表綁定跳轉到詳情頁的函數。

⑤： {{item.content | more}} 渲染簡介，而且經過一個過濾器使內容中數字過多時，進行剪切

<router-view v-bind:router-nesting='routerData'></router-view>

↑ 這是第二部分，子路由入口。v-bind:router-nesting='routerData' 給子路有中渲染頁面的數據。

接下來是script部分

首先引入router實例 import router from '.././router'
再接收 zjapp.vue 傳輸過來的數據 props:["routerData"]

methods方法裏函數解釋：

go(obj,index){
    router.push({path:this.$route.path+"/con",query:{type:index}});
}

↑ 這是列表中內容點擊時執行的函數，從 template 中傳過來 index 值，添加到 url 中，從而獲取這是列表中第幾個。

link(num){
    var listNum=this.$route.path.slice(6,7);
    if(listNum!=num){
        router.push("/user/"+num+"/0");
        this.isActive=this.$route.path.slice(6,7);
    }
}

↑ link（num）函數是導航點擊綁定的函數，經過傳志 num 將 url 轉換爲對應的分類，從而觸發 watch 從新獲取數據。這裏加了一個判斷，重複點擊，無效。

filters:{
    more(value){
        var newMessage=value.slice(0,40)+"........點擊查看更多";
        return newMessage;
    }
}

↑ 過濾器，剪切字數。

style就不解釋了

Ⅱ： showtwo.vue

這個是文件是詳情頁面，即主頁面中的列表內容點擊後，跳轉的頁面。

<template>
    <div style='height:700px;padding-top:100px'>
        <div>
            <img v-bind:src='routerNesting.detailedData.src' style='display:block;margin:0 auto;width:500px'>
            <br>
            <h2 v-text='routerNesting.detailedData.title'></h2>
            <p>{{routerNesting.detailedData.content}}</p>
            <button v-on:click='back' class='btn btn-success'>返回</button>
        </div>
    </div>
</template>
<script>
    import router from '.././router'
    export default{
        props:["routerNesting"],
        methods:{
            back(){
                router.push(this.$route.path.slice(0,9));
            }
        }
    }
</script>
<style></style>

↑ 數據與showone.vue類似，routerNesting數據是經過ziapp.vue->showone.vue->showtwo.vue傳遞過來的。
back() 函數將url從/user/0/0/con?type=2跳轉到/user/0/0 觸發watch更新數據。

Ⅲ： error.vue

<template>
    <div style="margin-top: 150px;">
        <h1 style="text-align: center;">遙遠的404！</h1>
        <div style="width: 150px;margin: 50px auto;">
            <button v-on:click="jump(0)" class="btn btn-primary">首頁</button>
            <button v-on:click="jump(1)" class="btn btn-primary">第一頁</button>
        </div>
    </div>
</template>
<script>
    import router from '.././router'
    export default{
        methods:{
            jump(num){
                num==0?router.push("/user/0/0"):router.push("/user/1/0");
            }
        }
    }
</script>
<style></style>

↑ 嗯~ o(￣▽￣)o，這個比較簡單，不作解釋了。