问题详细描述:
使用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');即可。