Vue根据不同设备跳转不同路由

枫陵

已于 2023-02-27 10:36:33 修改

阅读量895

点赞数

文章标签： vue PC端移动端 Powered by 金山文档

于 2023-02-01 13:59:44 首次发布

本文链接：https://blog.csdn.net/weixin_43899792/article/details/128832630

版权

一. 建立公共路由

export const constantRoutes = [
  {
    path: "/design",
    name: "design",
    component: () => import('@/views/design'),
    props: true
  },
  {
    path: "/design3",
    name: "design3",
    component: () => import('@/views/design3'),
    props: true
  }
]

其中design为PC端跳转路由，design3为非移动端跳转路由。

二. 条件判断

if 
(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
        this.$router.push({
          name: 'design3',
        })
}else {
       this.$router.push({
        name: 'design',
      })

如何使非PC端设备跳转design3,移动端设备跳转design。