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

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

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

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
    }
    
  ],

});

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

参考：

请确保在移动端代码中正确设置了路由，并且在路由对象中使用了正确的 base 属性。

例如，在移动端路由代码中，可以设置 base 属性：

const router = createRouter({
  history: createWebHistory('/move.html/'),
  mode: 'history',
  routes: [
    // 路由配置
  ]
});

这将告诉路由器在路径前添加 '/move.html/'，使路由器能够正确匹配移动端页面的路径。

然后还需要确保移动端页面正确加载了路由器，并将其挂载到 Vue 实例上。如：可以在移动端页面中的入口文件中添加以下代码：

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('#app')

请注意，这里将 Vue 实例挂载到 '#app' 而不是 '#move'，因为在移动端页面中，你的路由器可能会使用 '/move.html/' 作为基础路径，而不是 '/move/'。

该回答引用ChatGPT

根据你提供的信息，我可以看出在你的移动端页面中使用了 history 模式，但是你在切换到移动端页面时使用的是 window.location.href，这会导致浏览器在加载页面时不会触发路由，而是直接访问指定的 URL。

为了解决这个问题，你可以尝试使用 router.push 方法来触发路由。在你的 PC 端路由前置守卫中，你可以将 window.location.href 替换为 router.push('/move.html')，这样就可以触发路由，进入移动端页面并且 URL 中包含 /move.html。

另外，我还注意到你的移动端路由文件名称为 move.router.js，但是在 move.main.js 文件中引入时却使用了 ../move/move.router，这可能会导致引入错误。建议检查一下文件路径是否正确。

最后，如果你的移动端页面使用的是 history 模式，你需要确保你的服务器已经配置了正确的路由转发规则。如果没有正确配置，当用户在浏览器中直接访问移动端页面时，会出现 404 错误。

“Devil组”引证GPT后的撰写：
可以将路由配置修改为：

const router = createRouter({
  history: createWebHistory('/move.html'), // 在这里指定基本 URL
  routes: [
    {
      path: "/",
      redirect: "/test"
    },
    {
      path: "/test",
      name: 'test',
      component: test
    }
  ],
});

这里将 createWebHistory() 改为 createWebHistory('/move.html')，并将 /move.html 指定为基本 URL。这样，路由就可以正确地处理子路径了。

参考GPT和自己的思路，从你提供的代码中看不出问题，但是根据你的描述，是在从PC端跳转到移动端时出现路由无法触发的问题，这可能是由于路由模式导致的。

在你的代码中，使用了 createWebHistory() 方法来创建路由的 history 对象，这表明你使用的是 history 模式的路由。

在 history 模式下，路由是通过 HTML5 的 History API 来管理的，它会通过浏览器的历史记录来管理路由状态。这意味着你的路由只能在同一个域名下使用，而不能在不同的域名下使用。

因此，如果你在 PC 端的网站中使用了 window.location.href = '/move.html/' 来跳转到移动端网站，那么移动端网站的域名就变成了 localhost:8080，而不是 PC 端网站的域名。

因此，如果你想在不同域名下使用路由，你需要使用不同的路由模式，比如 hash 模式。你可以在创建路由时使用 createWebHashHistory() 方法来创建一个 hash 模式的路由。

示例代码：

move.router.js:

import { createRouter, createWebHashHistory } from "vue-router";
const test=()=>import('./page/Index.vue')

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect:"/test"
    },
    {
      path: "/test",
      name:'test',
      component:test
    }
  ],
});

export default router;

在移动端的入口文件 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')

这样，你就可以在 PC 端使用 window.location.href = '/move.html/#/' 来跳转到移动端，同时可以保持路由正常工作。

该回答引用GPTᴼᴾᴱᴺᴬᴵ
从你提供的代码片段来看，你的路由配置中使用了 mode: 'history'，这个选项可以将 URL 显示为“真实”的 URL，但是它需要服务器配置来支持，否则在访问子路由时会导致页面无法找到的问题。可能是这个问题导致你的路由无法正常工作。
·
另外，你在前置守卫中使用了 window.location.href = '/move.html/' 跳转到移动端页面，这样做会重新加载整个页面，导致 Vue 实例和路由状态被重置，可能也是无法触发路由的原因之一。建议使用 Vue Router 提供的 router.push('/move.html/') 方法进行路由跳转，避免页面重新加载。
·
你可以尝试在本地开启一个 HTTP 服务器来模拟服务器环境，例如使用 http-server 工具，然后访问子路由 /test，看看能否正常跳转到对应页面。如果无法正常跳转，你可以在服务器配置中添加重定向规则，将所有请求都重定向到 move.html 页面，这样就可以正常访问了。例如使用 Nginx 配置：

server {
    listen       80;
    server_name  localhost;
    root   /path/to/vue/dist;
    index  index.html;
    location / {
        try_files $uri $uri/ /move.html;
    }
}

该回答引用chatGPT
根据您提供的信息，我发现您的路由配置中没有匹配到/move.html路径，因此路由无法正常工作。您可以尝试以下步骤：

1.在路由配置中添加对/move.html路径的匹配，例如：

const router = createRouter({
  history: createWebHistory(),
  mode: 'history',
  routes: [
    {
      path: "/",
      redirect: "/test"
    },
    {
      path: "/test",
      name: 'test',
      component: test
    },
    {
      path: "/move.html",
      name: 'move',
      component: Move
    }
  ]
});

2.确保您在跳转到移动端页面时使用了正确的路径/move.html，而不是/move.html/。您可以在前置守卫中使用以下代码：

window.location.href = '/move.html';

3.或者在Vue组件中使用以下代码：

this.$router.push('/move.html');

注意，这里的路径应该是/move.html，而不是/move.html/。

希望这些步骤能帮助您解决问题。如果问题仍然存在，请提供更多信息，以便我能够更好地帮助您。

您可以尝试使用Vue Router提供的编程式导航来进行页面的跳转，而不是直接修改window.location.href。具体操作步骤如下：

在PC端的路由前置守卫中，通过编程式导航将用户重定向到移动端页面

router.beforeEach((to, from, next) => {
  const isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
  if (isMobile) {
    next('/move')
  } else {
    // 如果不是移动端，则继续执行下一个钩子或路由
    next()
  }
})

上述代码中，我们通过navigator.userAgent来检测当前用户使用的是否是移动设备，如果是，则通过next函数将用户重定向到移动端页面。如果不是移动端，则继续执行下一个钩子或路由。

在移动端页面的组件中，通过Vue Router提供的组件或$router.push方法来触发路由跳转。

<!-- 使用<router-link>组件 -->
<router-link to="/test">跳转到测试页面</router-link>

// 使用$router.push方法
this.$router.push('/test')

使用组件与$router.push方法都可以触发路由跳转，具体取决于您的使用场景和个人偏好。

通过上述方法，您应该可以解决移动端切换时无法触发路由的问题。希望对您有所帮助！

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
根据你的描述，问题可能是因为你的路由配置中使用了 history 模式，而在 PC 端跳转到移动端页面时，不是访问根路径，导致路由无法匹配到正确的路径。

解决方案：

首先，在移动端的路由中，需要将 mode 改成 hash，这样即使不是访问根路径，也能正确匹配到路由。

move.router.js 代码：

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

});

在 PC 端的路由守卫中，不要使用 window.location.href 直接跳转到移动端页面，而是使用 Vue Router 提供的 router.push 方法跳转到路由页面，这样可以确保正确匹配到移动端的路由。

move.router.js 代码：

router.beforeEach((to,from,next)=>{
  if(to.matched.some(record=>record.meta.requireMove)){
    next({path:'/move.html/'})
  }else{
    next()
  }
})

replace:

window.location.href = '/move.html/'

with:

router.push('/move.html/')

在移动端的路由中，由于使用了 Vue Router 提供的 hash 模式，所以需要在 createWebHashHistory() 中添加路由前缀 /#。

move.router.js 代码：

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

});

综上所述，完整代码如下：

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, createWebHashHistory } from "vue-router";
const test=()=>import('./page/Index.vue')
const router = createRouter({
  history: createWebHashHistory('/#'),
  mode:'hash',
  routes: [
    {
      path: "/",
      redirect:"/test"
    },
    {
      path: "/test",
      name:'test',
      component:test
    }
  ],
});

router.beforeEach((to,from,next)=>{
  if(to.matched.some(record=>record.meta.requireMove)){
    next({path:'/move.html/'})
  }else{
    next()
  }
})

export default router

如果我的回答解决了您的问题，请采纳！