vue-router2.0跳转失败

问题描述

问 题

最近从vue1.0升级到vue2.0,但出来了一个问题，

输入localhost:80变成了如上图所示，连端口号都没了，原来是应该跳转到list页面的

http://localhost:81/#/list

**用vue的开发工具查看有区别，第一张图是vue1.0的，第二张是vue2.0的
**

在beforeEach中，也可以看出router.app之间的差距，第一张图是vue1.0时候的

从beforeEach这个函数上可以看出，router已经是跳转到list上的样子，最后贴上vue2.0的router代码，求解答

window.Vue = require('vue');
var VueRouter = require('vue-router');
var VueResource = require('vue-resource')
var App = require('./views/app.vue');
var AppApi = require('./js/common/app-api.js')

Vue.use(VueRouter);
Vue.use(VueResource);

var router = new VueRouter({
    mode: 'hash',
    routes: [
        {path: '/list', name: 'list', component: require('./views/list.vue')},
        {path: '/detail/:id', component: require('./views/detail.vue')},
        {path: '/order-list', component: require('./views/order-list.vue')},
        {path: '/message', component: require('./views/message.vue')},
        {path: '/cart', component: require('./views/cart.vue')},
        {path: '/confirm', component: require('./views/confirm.vue')},
        {path: '/area-select', component: require('./views/area-select.vue')},
        {path: '/pay-result', component: require('./views/pay-result.vue')},
        {path: '/address', component: require('./views/address.vue')},
        {path: '/select-address', component: require('./views/address.vue')},
        {path: '/add-address', component: require('./views/add-address.vue')},
        {path: '/edit-address/:id', component: require('./views/add-address.vue')},
        {path: "*", redirect: '/list'}
    ]
});

router.beforeEach(function (to, from, next) {

    if (AppApi.storeId) {
        next();
    }
    else {
        router.app.loading = true;
        AppApi.bindStore().then(function (data) {
            router.app.loading = false;
            if (data.resCode) {
                AppApi.store = data.data;
                AppApi.storeId = data.data.id;
                next();
            }
        });
    }

})
console.info(23)

window.vm = new Vue({
    el: 'app',
    router,
    render: h => h(App)
})
console.log('hello');

解决方案

发现了一个解决办法，我觉得Vue-router2.0中的beforeEach调用过程应该是变化了，如下面的代码所示，但执行到第七行，vm.$children...的时候，通过vm.$children[0]或者router.app.children[0]才能获取到Appvue，图在代码下,需要demo测试的可以Q给

router.beforeEach(function(to, from, next){
    if (AppApi.storeId) {
        next();
    }
    else {
        window.setTimeout(()=>{
            vm.$children[0].loading = true;
        })
        AppApi.bindStore().then(function (data) {
            vm.$children[0].loading = false;
            if (data.resCode) {
                AppApi.store = data.data;
                AppApi.storeId = data.data.id;
                next();
            }else {
                next(false);
            }
        });
    }
});

其实，我觉得这或许是vue-router2.0版本之前的一个Bug，因为还未执行router.beforeEach函数，执行中地址栏就变成如下图所示了，所以vue-router2.0是解决了之前的一个bug吧

这篇关于vue-router2.0跳转失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！