Vue 项目 切换手机端和pc端。同一个项目,配置不同的路由
1, 首先判断设备:在main.js里面写// vue原型挂载 - 是否PC端if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {Vue.prototype.$pc = false//hostConfig.vconsole && new VConsole()} else {Vue.proto
·
1, 首先判断设备:在main.js里面写
// vue原型挂载 - 是否PC端
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
Vue.prototype.$pc = false
//hostConfig.vconsole && new VConsole()
} else {
Vue.prototype.$pc = true
let winWidth = document.documentElement.offsetWidth ||
document.body.offsetWidth
winWidth = winWidth < 1366 ? 1366 : winWidth
let oHtml = document.getElementsByTagName('html')[0]
oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
window.addEventListener('resize', function () {
let winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
winWidth = winWidth < 1366 ? 1366 : winWidth
let oHtml = document.getElementsByTagName('html')[0]
oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
})
}
2, 在app.vue里面
watch: {
$route: function (to, from) {
if (to.name.indexOf('_p') > 0 && !this.$pc) {
this.$router.replace(to.name.split('_p')[0])
//电脑转手机端
//域名为index_p去掉_p变成手机端index路由
if (to.name=="index_p") {
let str = to.name.split("_p")[0];
let str2 = '/'+str;
this.$router.push(str2);
}
} else if (to.name.indexOf('_p') < 0 && this.$pc) {
//手机端转电脑
//在路由尾巴添加_p变成电脑端
this.$router.replace(to.name + '_p')
}
}
},
3,路由表配置 (下面使用的是路由懒加载
{
path: '/index',
name: 'index',
component: resolve => require(['../views/Index/index.vue'], resolve)
},
{
path: '/index_p',
name: 'index_p',
component: resolve => require(['../views/Index_p/index.vue'], resolve)
},
4、vue路由router文件的配置,我使用的是如下的配置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
//跳转到index_p,并且默认是首页
{ path: '/', redirect: 'index_p', },
{
path: '/index_p',
name: 'index_p',
component: resolve => require(['../views/PC/Index_p.vue'], resolve),
meta: {
active: "1"
}
},
{
path: '/index',
name: 'index',
component: resolve => require(['../views/H5/Index.vue'], resolve),
},
]
})
export default router
更多推荐
已为社区贡献7条内容
所有评论(0)