CHANsM 2023-03-07 09:24 采纳率: 100%
浏览 70
已结题

Vue两套代码适配pc和移动端无法触发路由

我用两套Vue代码实现pc和移动端的切换,切换到移动端的网址是localhost:8080/move. html/,不能触发路由,请问怎么解决

我切换的方法是,如果是pc端,就用路由前置守卫window.location.href = '/move.html/'跳转到移动端页面

img

move.main.js文件代码:


import { createApp } from 'vue'
import Move from './Move.vue'
import ElementPlus from 'element-plus'
import router from '../move/move.router'
import 'element-plus/dist/index.css'
const app=createApp(Move)
app.use(router)
app.use(ElementPlus)
app.mount('#move')

move.router.js代码:


import { createRouter, createWebHistory } from "vue-router";
const test=()=>import('./page/Index.vue')
const router = createRouter({
  history: createWebHistory(),
  mode:'history',
  routes: [
    {
      path: "/",
      redirect:"/test"
    },
    {
      path: "/test",
      name:'test',
      component:test
    }
    
  ],

});
  • 写回答

9条回答 默认 最新

  • 关注

    如果是切换两套代码,完全可以通过检测使用设备 或者 屏幕宽度去识别,然后根据这个特征去匹配对应的路由,比如我现在匹配的是移动端,本身pc端路由是 /pc/index 那你完全可以把路由拼接一下, 改成 /move/index 这种形式啊,然后路由表就写一张就够了写在 router.js 里面就行。没必要特别去转一次所谓的新路由,

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题?

问题事件

  • 系统已结题 3月20日
  • 已采纳回答 3月12日
  • 修改了问题 3月7日
  • 创建了问题 3月7日

悬赏问题

  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 LD衰减计算的结果过大
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 计算300m以内的LD衰减
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图
  • ¥15 为什么我的pycharm无法用pyqt6的QtWebEngine
  • ¥15 FOR循环语句显示查询超过300S错误怎么办