vue 路由進(jìn)階

張憲坤發(fā)布于2019-08-23 18:09 / 1734人閱讀

摘要：接收路由的路由傳參數(shù)的三種方式布爾模式表明將作為傳遞到匹配的組件中。元信息可在路由對象中配置屬性，是一個對象。

路由可向路由匹配的組件傳遞參數(shù)，不同情況向組件傳遞不同的參數(shù)，從而實(shí)現(xiàn)組件的復(fù)用。

路由向組件傳遞參數(shù)

和路由匹配的組件可以在組件中使用 $route 獲取路由上的參數(shù)：

傳參方式

:、params和query

:在路徑傳遞參數(shù)

{
    path: "/argu/:id/book",
    name: "argu",
    component: () => import("@/views/ArguPage")
}

路徑中的一部分是參數(shù)，必須傳遞該參數(shù)：


path跳轉(zhuǎn)

name+params跳轉(zhuǎn)

{{$route.params.id}}

此時(shí) path+ parmas傳遞參數(shù)，params會被忽略。

params+name傳遞參數(shù)

路由：

{
    path: "/argu",
    name: "argu",
    component: () => import("@/views/ArguPage")
}

跳轉(zhuǎn)方式是 name+params+（query），通過path跳轉(zhuǎn)，params 會被忽略。


  跳轉(zhuǎn)到 hello

// path + params ，params 會被忽略，因?yàn)槁窂街袥]有定義參數(shù)

  跳轉(zhuǎn)到 hello

query 參數(shù)

query 參數(shù)參數(shù)，表現(xiàn)為查詢字符串，和localtion.serach一樣的。

不需要先在路徑中先定義，可通過path、path+query 或者 name + query 傳遞參數(shù)。

跳轉(zhuǎn)到 hello
跳轉(zhuǎn)到 argu
跳轉(zhuǎn)到 argu
{{ $route.query.queryName }}

函數(shù)傳遞 query

// 主要是  $router 不是 $route
go() {
    this.$router.push({
        name: "argu",
        query: {
                queryName: "你好"
            }
        })
    }
}

但是這樣使得 $route 和組件耦合在一起，不方便組件的復(fù)用，如果能將路由中的參數(shù)傳遞到組件的props 就好了，恰恰是可以這樣設(shè)置的。

props 接收路由的 params

路由傳參數(shù)的三種方式：

布爾模式

{
    path: "/user/:id", 
    component: User, 
    props: true //表明 將 id 作為 proos 傳遞到匹配的組件 User 中。
}

User 中定義 props 接收 id:

export default {
    props:{
        id:{
            type:String,
            default:"jackzhou"http://默認(rèn)值
        }
    }
}

對象模式

將路由的 props 屬性設(shè)置一個對象，也可在組件中獲取到該值，這種方式往往用于傳遞靜態(tài)值，即 name 值不會變化。

路由對象：

{
    name: "home",
    alias:"/home_page",
    path: "/",
    props:{name:"jack jack"},
    component: Home
}

Home 組件：

props:{
    name:{
        type:String,
    }
}

函數(shù)模式

以上兩種方式，params 參數(shù)的名字必須和組件中的props 屬性名字相同，如果想對 params 進(jìn)行改造后傳遞到組件，就可將 props 設(shè)置成函數(shù)，在函數(shù)內(nèi)獲取路由中的 params 或者 query，或者其他屬性值，對其進(jìn)行處理后再傳遞給組件。

注意：這種方式函數(shù)必須返回一個對象。

路由：

{
    name: "about",
    path: "/about/:years", //params 有一個參數(shù) years
    props:(route) {
          const now = new Date()
          return {
        // 將 years 改造成 name
        name: (now.getFullYear() + parseInt(route.params.years)) + "!"
        }
        },
    component: () => import("@/views/AboutPage"),
}

組件中的 props:

props: {
    name: {
        type: String
    }
}

命名視圖的路由，要為每個命名視圖添加 props：

{
    path:"/name/:view",
    name:"name_view",
    components:{
        default:()=>import("@/views/ChildPage"),
        sister:()=>import("@/views/SisterPage"),
        brother:()=>import("@/views/BrotherPage"),
    },
    props:{
        default:true,
        sister:false,
        brother:(route)=>({view:route.params.view.toUpperCase()})
    }
}

完整的例子

{% raw %}

See the Pen
route 的 params 傳遞組件 by JackZhouMine (@JackZhouMine)
on CodePen.

{% endraw %}

HTML5 History 模式

路由配置里有一個屬性 mode ，默認(rèn)值是 hash，以hash來模擬一個url，url改變時(shí)，頁面不會重新加載。

先使用普通模式，可將 mode 設(shè)置成 history，這種模式會使用 history.pushSate 來完成url跳轉(zhuǎn)而頁面不會重新加載。這種模式需要服務(wù)器設(shè)置一下。

使用 history 模式，因?yàn)閣eb應(yīng)用往往是單頁應(yīng)用，當(dāng)用戶訪問一個不存在的路徑時(shí)，需要提供一個后備頁面。

在路由配置的最后增加一個404路由：

{
    path:"*",
    component:NotFoundPage// 前面沒有匹配的路由，最后會匹配該路由。
}

meta 元信息

可在路由對象中配置 meta 屬性，meta 是一個對象。

比如，根據(jù)不同頁面顯示不同的 title。

{
    name: "about",
    path: "/about",
    meta: {
        title: "關(guān)于"
    },
       component: () => import("@/views/AboutPage")    
}

在路由配置文件中，設(shè)置各個頁面的 title：

const router= new Router({
    routes
})
router.beforeEach((to,from,next)=>{
    //setTitle 函數(shù)用于設(shè)置頁面標(biāo)題
    to.meta&&setTitle(to.meta.title) //這是簡化if語句的簡寫
    console.table(to)
    console.table(from)
    next()
})
export default router

導(dǎo)航守衛(wèi) 全局守衛(wèi)

全局前置守衛(wèi)

const router = new Router({
    {
        path:"/",
        name:"heom_page"
        component:Home,
        //路由獨(dú)享守衛(wèi)
        beforeEnter:(to,from,next)=>{
            //處理邏輯
            next()
        }
    }
})
//每次路由進(jìn)入都會調(diào)用
router.beforeEach((to,from,next)=>{
    //處理邏輯，比如登錄判斷，可跳轉(zhuǎn)到任意頁面
    //不要忘記調(diào)用 next，不調(diào)用 next，頁面不會跳轉(zhuǎn)
})

后置鉤子

//路由跳轉(zhuǎn)之后做一些操作，比如去掉登錄樣式
router.afterEach((to,form)=>{
    //邏輯處理
})

路由獨(dú)享守衛(wèi)

只在匹配某個路由時(shí)執(zhí)行。

組件內(nèi)守衛(wèi)

beforeRouteEnter, 組件創(chuàng)建之前調(diào)用，組件不具備this；
beforeRouteUpdate，路由更新，而組件被復(fù)用時(shí)調(diào)用，可使用this；
beforeRouteLeave，離開路由時(shí)調(diào)用，可使用this。

export default{
    name:"Home",
    data(){
        return {}
    },
    /**
    * 組件內(nèi)路由守衛(wèi)
    * 1. 該函數(shù)在路由進(jìn)入時(shí)執(zhí)行
    * 2. 此時(shí) 組件還未渲染，不可用 this,當(dāng)可在  next 中用 vm
    * 3. next 晚于 mounted 執(zhí)行，next 之前的代碼，早于beforeCreate       *       執(zhí)行
    * 4. 最后需要調(diào)用 next 使得路由跳轉(zhuǎn)
    */
    beforeRouteEnter(to, from, next) {
        console.log("①，home 組件內(nèi)路由守衛(wèi)，beforeRouteEnter");
        // next 晚于 mounted 執(zhí)行，next 之前的代碼，早于beforeCreate 執(zhí)行
        next((vm)=>{
            console.log("vm")
            console.log(vm)//有值
            console.log("this")
            console.log(this)// undefined
            console.log("②，home 組件內(nèi)路由守衛(wèi)，beforeRouteEnter");
        });
    },
    /**
    * 組件內(nèi)路由守衛(wèi)
    * 1. 該函數(shù)在路由離開時(shí)執(zhí)行,最先調(diào)用,然后在調(diào)用全局守衛(wèi)，再調(diào)用        *     beforeDestroy
    * 2. 此時(shí)，該路由守衛(wèi)所在組件已渲染，可用 this
    * 3. 最后需要調(diào)用 next 使得路由跳轉(zhuǎn)
     */
    beforeRouteLeave(to, from, next) {
        console.log("①，home 組件內(nèi)路由守衛(wèi)，beforeRouteLeave");
        let leave = confirm("你確定要離開 home 頁嗎？");
        if (leave) {
        // console.log(to.name, from.name);
        // console.log(this);
        next(() => {
            console.log("②，home 組件內(nèi)路由守衛(wèi)，beforeRouteLeave");
            }); //給 next 傳遞 false ,路由不會跳轉(zhuǎn)
        } else {
            next(false);
        }
    },
    /*
    * 當(dāng)路由發(fā)生變化，而組件被復(fù)用時(shí)調(diào)用
    * 1. 此時(shí)該復(fù)用組件已被渲染，可用 this
    * 2. 需要調(diào)用 next，組件才能渲染
    */
    beforeRouteUpdate(to, from, next) {
        console.log("①，argu，組件內(nèi)路由守衛(wèi)，beforeRouteUpdate");
        next(() => {
            console.log("next，argu，組件內(nèi)路由守衛(wèi)，beforeRouteUpdate");
        });
    },
    beforeCreate() {
        console.log("beforeCreate")
    },
    created() {
        console.log("created")
    },
    beforeMount() {
        console.log("beforeMount")
    },
    mounted() {
        console.log("mounted")
    },
    beforeUpdate() {
        console.log("beforeUpdate")
    },
    updated() {
        console.log("updated")
    },
    beforeDestroy() {
        console.log("beforeDestroy")
    },
    destroyed() {
        console.log("destroyed")
    }
}

路由全過程：

導(dǎo)航被觸發(fā)

離開頁面（失活的組件）里調(diào)用離開守衛(wèi) beforeRouteLeave

調(diào)用全局前置守衛(wèi) beforeEach

在重用的組件里調(diào)用 beforeRouteUpdate (非重用組件，沒有這個步驟)

調(diào)用路由獨(dú)享守衛(wèi) beforeEnter

解析異步路由組件

在進(jìn)入頁面（激活組件）調(diào)用 beforeRouteEnter

調(diào)用全局解析守衛(wèi) beforeResolve （導(dǎo)航被確認(rèn)之前，組件內(nèi)守衛(wèi)和異步路由組件被解析之后，調(diào)用 beforeResolve）

導(dǎo)航被確認(rèn)（什么時(shí)候被確認(rèn)，全部鉤子執(zhí)行完了，是被確認(rèn)的）

調(diào)用全局后置守衛(wèi) afterEach

觸發(fā) DOM 更新

在 vue 實(shí)例中（此時(shí)頁面解析完畢了嗎？是的）調(diào)用 beforeRouterEnter 守衛(wèi)里傳給 next 的回調(diào)。next在mounted之后被調(diào)用。

過渡效果

可以給路由匹配的組件設(shè)置過渡效果，讓頁面平滑地顯示，提升用戶體驗(yàn)。
需要用到 transition 標(biāo)簽，如果有多個視圖需要過渡，則用 transition-group。

css 過渡效果：

    .router-view-enter{
        opacity: 0;
    }
    .router-view-enter-active{
        transition: opacity 1s ease;
    }

    .router-view-enter-to{
        opacity: 1;
    }
    .router-view-leave{
        opacity: 1;
    }
    .router-view-leave-active{
        transition: opacity 1s ease;
    }

    .router-view-leave-to{
        opacity: 0;
    }

這些設(shè)置，每個頁面的效果都是一樣的，要為不同的頁面設(shè)置不同的效果，可用路由傳遞相應(yīng)的參數(shù)來，讓動態(tài)綁定到 transition 的 name 屬性上。

或者監(jiān)聽路由變化：

watch: {
    "$route"(to){
        console.log(to);
        to.params&&to.params.view&&(this.effect = to.params.view)
    },
}

參考

Vue.js - 路由 vue-router 的使用詳解2（參數(shù)傳遞）

云服務(wù)器 GPU云服務(wù)器進(jìn)階技巧 -進(jìn)階進(jìn)階進(jìn)階篇

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104753.html

發(fā)表評論

登陸后可評論

0條評論

張憲坤

男|高級講師

我要關(guān)注我要私信

TA的文章

針對Python初學(xué)者，這13個好用到起飛的小技巧！

閱讀 1572·2021-10-14 09:43
VMShell公司ASN：147002正式SpeedTest生效香港CMI線路VPS,即將增加G口美

閱讀 1566·2021-10-09 09:58
NCCK：香港CN2服務(wù)器，雙E5-處理器，24核32G內(nèi)存,10M無限流量CN2GIA，五折$69

閱讀 2030·2021-09-28 09:42
Python爬蟲：通過做項(xiàng)目，小編了解了酷狗音樂的加密過程

閱讀 3837·2021-09-26 09:55
馬斯克承認(rèn)特斯拉最新的“完全自動駕駛測試版”仍存在不足

閱讀 1842·2021-08-27 16:23
騰訊云秒殺：云服務(wù)器74元/年起,1C2G6M三年僅219元起

閱讀 2843·2021-08-23 09:46
純css實(shí)現(xiàn)叉號

閱讀 976·2019-08-30 15:55
如何讓被遮擋層可以進(jìn)行事件點(diǎn)擊？（純CSS方法）

閱讀 1601·2019-08-30 15:54

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue 路由進(jìn)階

{{$route.params.id}}

{{ $route.query.queryName }}

相關(guān)文章

vue進(jìn)階面試題

vue進(jìn)階面試題

Vue-router進(jìn)階：導(dǎo)航守衛(wèi)

發(fā)表評論

0條評論

張憲坤

男|高級講師

TA的文章

針對Python初學(xué)者，這13個好用到起飛的小技巧！

VMShell公司ASN：147002正式SpeedTest生效香港CMI線路VPS,即將增加G口美

NCCK：香港CN2服務(wù)器，雙E5-處理器，24核32G內(nèi)存,10M無限流量CN2GIA，五折$69

Python爬蟲：通過做項(xiàng)目，小編了解了酷狗音樂的加密過程

馬斯克承認(rèn)特斯拉最新的“完全自動駕駛測試版”仍存在不足

騰訊云秒殺：云服務(wù)器74元/年起,1C2G6M三年僅219元起

純css實(shí)現(xiàn)叉號

如何讓被遮擋層可以進(jìn)行事件點(diǎn)擊？（純CSS方法）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue 路由進(jìn)階

{{$route.params.id}}

{{ $route.query.queryName }}

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！