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])
} else if (to.name.indexOf('_p') < 0 && this.$pc) {
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， 打完收工