vue | 判断移动端还是pc端渲染不同的页面

把pc端和移动端写在同一个项目中,需要判断设备终端进行不同的渲染页面,此时需要根据判断不同的设备终端设置跳转不同的路由。

1.在router中配置两个不同的路由地址入口,

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../pages/home.vue'
import MHome from '../pages/mHome.vue'

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/m',
      name: 'mHome',
      component: MHome
    }
  ]
})

2.在 App.vue 的 mounted 方法中对设置进行判断

if (this._isMobile()) {
    // alert("手机端");
    this.$router.replace('/m');
 } else {
    // alert("pc端");
   this.$router.replace('/');
 }

3.在 App.vue 的 methods中设置_isMobile()函数

_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;
 }

如此就大功告成!!!实现了在同一个项目中判断移动端还是pc端,通过路由渲染不同的页面.