mui+vue导致路由跳转问题的解决
问题详细描述:
使用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');即可。