Vue-Router 原始碼分析(七) VueRouter.push()的詳解-有解無憂

通過VueRouter實體的push()操作，可以進行路由跳轉，對于<router-link/>組件來說，它系結的是click事件，最后也是通過執行push()方法來進行路由跳轉的，

對于push()方法來說，一共可以傳入三種形式的引數:

字串形式，值為路勁
含有name的物件形式，可以搭配params屬性傳遞引數
含有path的物件形式

舉個栗子:

<div id="app">
    <button @click="test">測驗</button>   
    <hr/>
    <router-view></router-view>
</div>
<script>                   
    const info   = { template:'<div>Page info</div>'}             //登陸頁
    const home   = { template:'<div>Page home:{{this.$route.params.uid}}</div>'}            //主頁
    const detail = { template:'<div>Page detail:{{this.$route.params.id}}</div>'}         //詳情頁
    
    const router = new VueRouter({
        routes:[                                   
            {path:'/info',component:info},
            {path:'/home/:uid',component:home,name:'home'},
            {path:'/detail/:id',component:detail,}
        ]
    })
    const app = new Vue({                                                     
        el:'#app',
        data:{no:0},
        router:router,
        methods:{
            test(){
                this.no = this.no%3+1;
                switch(this.no){                         //點擊測驗按鈕將依次跳轉到三個不同的組件，跳轉時使用的push引數也不同
                    case 1:
                        this.$router.push('/info')
                        break;
                    case 2:
                        this.$router.push({name:'home',params:{uid:10}})
                        break;
                    case 3:
                        this.$router.push({path:'/detail/15'})
                        break;
                }
            }
        }
    })
</script>

點擊按鈕時分別執行三個不同引數的push操作，如下:

我們執行push()進行路由跳轉時，會執行VueRouter原始碼內History物件上的push()操作，然后會執行transitionTo()函式進行路由跳轉，在該函式內首先會執行normalizeLocation對引數做出修正，統一修正為一個物件，因此對于push('/login')和push({path:'/login'})來說是一樣的，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/3981.html

標籤：HTML5

上一篇：video動態設定寬高

下一篇：jQuery 事件