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

枫陵

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

阅读量1k

点赞数

文章标签： vue PC端移动端

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

本文链接：https://blog.youkuaiyun.com/weixin_43899792/article/details/128832630

版权

文章介绍了如何设置Vue.js应用中的公共路由，包括一个用于PC端的design路由和一个用于非移动端的design3路由。通过检测window.navigator.userAgent来判断设备类型，匹配到移动端设备时，应用将跳转至design3，否则推送到design路由，实现不同设备的适配跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 建立公共路由

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。