vue router自动根据移动端,PC端开启不同页面

最新推荐文章于 2023-12-23 08:37:22 发布

Winston_Mo_

最新推荐文章于 2023-12-23 08:37:22 发布

阅读量1.6k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/fanlao4203/article/details/107247200

版权

本文介绍了如何使用Vue Router根据移动端和PC端设备自动开启不同的页面。主要步骤包括在router中配置两个独立的路由入口，并在App.vue中进行相应设置。通过执行`npm run build`打包发布后，系统将自动实现设备适配。

摘要由CSDN通过智能技术生成

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

{
  path: '/loginPhone',
  name: 'loginPhone',
  component: loginPhone
},
{
  path: '/login',
  name: 'login',
  component: _import('common/login')
}

详细版:

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

<script>
  export default {
    name: 'login',
    mounted () {
      if (this._isMobile()) {
        // alert("手机端");
        this.$router.replace('/loginPhone')
      } else {
        // alert("pc端");
        thi