vue.js路由vue-router（二）——路由進階

時間 2019-11-06

標籤 vue.js vue 路由 router 進階欄目 JavaScript 简体版

原文原文鏈接

導航鉤子

導航鉤子相似於生命週期鉤子，包含路由進入前，進入後，更新時，退出前等幾個週期，主要用於控制導航的前進後退或跳轉等。html

在開始以前，咱們先來寫兩個路由
新建html,引入vue.js及vue-router.jsvue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <button><router-link to='/route1'>路由一</router-link></button>
            <button><router-link to='/route2'>路由二</router-link></button>
        </div>
        <router-view></router-view>
    </div>

    <script src="js/router.js"></script>
</body>
</html>

在router.js中定義路由及vue實例vue-router

//構建組件
var route1 = Vue.extend({
    template: '<div>路由一內容</div>'
});

var route2 = Vue.extend({
    template: '<div>路由二內容</div>'
});

//定義路由
var router = new VueRouter({
    routes: [
        {
            path: '/route1',
            name: 'route1',
            component: route1
        },
        {
            path: '/route2',
            name: 'route2',
            component: route2
        }
    ]
});

//定義vue實例
var app = new Vue({
    el: '#app',
    router
})

打開瀏覽器，查看效果
瀏覽器

1.全局鉤子

定義路由以後，接着就可使用router.beforeEach定義全局鉤子
在router.js中定義路由後面加上以下代碼app

router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
})

全局鉤子做用於全部路由，裏面的參數to表示即將要進入的路由對象，from表示即將要離開的路由對象，next是繼續跳轉或中斷的方法。
咱們來看一下打印出的對象

咱們的操做是點擊路由一按鈕，即將由'/'跳轉至'/route1'，能夠看到打印出的第一個對象to的path爲'/route1'，第二個對象from的path爲'/'。
有一個問題，點擊按鈕以後路由並無進行跳轉，這是由於咱們沒有寫next方法。next方法有如下3種：函數

1.next() 默認跳轉
2.next(false)保持當前路由不進行跳轉url

3.next('路由路徑') 指定路由跳轉spa

（1）默認跳轉
咱們先來試第一種code

router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
    next()
})

打開瀏覽器，能夠看到路由跳轉正常，而且以默認的路由進行跳轉

（2）保持當前路由不進行跳轉
若是不寫next方法就不會進行跳轉，那麼與next(false)的區別就在於，後者是無論url怎麼改變，也會重置到from對應的路由。component

router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
    next(false)
})

能夠看到點擊按鈕並沒有反應，在地址欄輸入其餘路由也跳轉回當前路由

（3）指定路由跳轉
這個方法最好不要寫在全局鉤子中，否則會陷入無限循環，跳轉到指定路由又觸發該導航鉤子又進行跳轉

2.路由內鉤子

導航鉤子也能夠經過beforeEnter寫在某個路由內部

var router = new VueRouter({
    routes: [
        {
            path: '/route1',
            name: 'route1',
            component: route1,
            meta:{title: '路由一'}
            beforeEnter: function(to,from,next){
                console.log(to)
                console.log(from)
                next()
            }
        },
        {
            path: '/route2',
            name: 'route2',
            component: route2,
            meta:{title: '路由二'}
        }
    ]
});

這樣只在路由'/route1'下才會觸發該鉤子

3.組件內鉤子

組件內鉤子有三種

var route1 = Vue.extend({
    template: '<div>路由一內容</div>',
    //對應該組件的路由被確認以前，此時還未建立組件實例
    beforeRouteEnter:function(to,from,next){
        
    },
    //對應該組件的路由被重複調用之時，如嵌套路由，此時組件實例已被建立
    beforeRouteUpdate:function(to,from,next){

    },
    //即將離開對應該組件的路由時
    beforeRouteLeave:function(to,from,next){

    }
});

路由元信息

定義路由的時候能夠設置meta字段

var router = new VueRouter({
    routes: [
        {
            path: '/route1',
            name: 'route1',
            component: route1,
            meta:{title: '路由一'},
        },
        {
            path: '/route2',
            name: 'route2',
            component: route2,
            meta:{title: '路由二'}
        }
    ]
});

經過這個咱們能夠在全局鉤子中設置頁面的標題之類的，例如

router.beforeEach(function(to,from,next){
    console.log(to)
    console.log(from)
    if(to.meta.title){
        document.title = to.meta.title
    }else{
        document.title = '路由'
    }
    
    next()
})

查看效果

過渡動效

在路由中能夠給路由視圖<router-view>用<transition>標籤設置總的過渡類名

<transition name="fade" v-on:before-enter="enter">
    <router-view></router-view>
</transition>

其中before-enter爲鉤子函數，鉤子函數有如下幾種，本例中只寫了第一種「進入以前」

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

接着給fade類寫過渡樣式

.fade-enter-active, .fade-leave-active{transition: all 0.5s ease;}
.fade-enter, .fade-leave-active{opacity:0;}

查看效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。