经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。
在 router/index.js 中添加两个页面
export default new Router({
routes: [
{
// pc端首页
path: '/',
name: 'index',
component: () => import('../views/index.vue')
},
{
// pc端首页
path: '/m_index',
name: 'm_index',
component: () => import('../views/m_index.vue')
},
]
})
在 App.vue 的 mounted 方法中对设置进行判断,如下:
if (this._isMobile()) {
this.$router.replace('/m_index');
} else {
this.$router.replace('/');
}
methods:{
_isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag;
}
}