mui+vue导致路由跳转问题的解决

原文链接： http://www.cnblogs.com/burtyang/p/9676429.html

问题详细描述:

使用vue配置好路由后，在浏览器端可以正常运行，路由正常跳转，但是打包在app端运行时，路由地址就是错的。

分析:由于手机端(安卓)匹配根地址"/"时是文件夹 

/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/...这样的地址，导致路由本身即是错误的。

 

注：为了浏览器端方便调试，并且快速即方便，开发阶段路由使用两种方式。

解决办法:

 

/**2. 模拟器下调试时 **/
    mui.init();
    window.baseAppAdrr; 
    mui.plusReady(function(){
        //平台根地址
        window.baseAppAdrr = plus.io.convertLocalFileSystemURL('_www/web/dist');
        //console.log(baseAdrr)
        const router = new VueRouter({
            mode:'history',  //切换路径模式，编程history模式
            //滚动条滚动行为，不加这个默认就会记忆原来滚动条的位置
            routes: [
                {
                    /** 模拟器下真实地址
                     * /storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/web/dist/index.html
                     * **/
                    path: baseAppAdrr+'/',
                    redirect: baseAppAdrr+ '/msg/home'
                },{
                    path: baseAppAdrr+'/index.html',
                    redirect: baseAppAdrr+'/msg/home'
                },
                {
                    path: baseAppAdrr+'/msg/home',
                    component: Home
                },{
                    path: baseAppAdrr+'/msg/chat',
                    component: Chat
                },
                {
                    path: baseAppAdrr+'/msg/*',
                    redirect: baseAppAdrr+'/msg/home'
                }
            ]
        });

        const vm = new Vue({
            el: '#app',
            store,
            router,
            render: h => h(App)
        }).$mount('#app');
        window.vm = vm;
    });

　　浏览器端路由配置：

//1. 浏览器下
const router = new VueRouter({
    mode:'history',  //切换路径模式，编程history模式
	//滚动条滚动行为，不加这个默认就会记忆原来滚动条的位置
    routes: [
        {
            path:'/',
            redirect: '/msg/home'
        },{
            path:'/index.html',
            redirect: '/msg/home'
        },
        {
            path:'/msg/home',
            component: Home
        },{
            path:'/msg/chat',
            component: Chat
        },
        {
            path:'/msg/*',
            redirect: '/msg/home'
        }
    ]
});
const vm = new Vue({
        el: '#app',
        store,
        router,
        render: h => h(App)
    }).$mount('#app');
    window.vm = vm;

　　而如果要使用两种都匹配的话：只需要判断当前是否是手机

//判断是否是手机安卓或者ios平台
function isAppIos(){
    return (mui.os.ios || mui.os.android)? true: false;
}

　　

同样: 跳转路由时， 我们使用编程式路由跳转:

window.vm.$router.push({path:'/msg/chat'});

这样跳转时我们也要预先判断当前的运行环境:

也可以预先定义一个函数:

//路由跳转
function routeJump(path){
    if(isAppIos()){
        //此处baseAppAddr为定义的手机端平台文件根地址
        window.vm.$router.push({path: window.baseAppAdrr+ path});
    }else{
        window.vm.$router.push({path: path});
    }
}

　　引用方法使用:  routeJump('/msg/chat');即可。

 

转载于:https://www.cnblogs.com/burtyang/p/9676429.html