如何在已有哈希导航的PHP环境中构建Vue3+VueRouter4应用

To resolve the routing conflict between your PHP app's hash structure and Vue Router 4, you can configure Vue Router to use the existing random hash as its base path. Here's a step-by-step implementation:

1. Extract the initial random hash from the URL's hash segment:

   // Remove the leading '#' to get the raw random hash string
   const initialHash = window.location.hash.slice(1);
   

2. Set up Vue Router with the custom base:
   Pass the extracted hash (prefixed with a slash) to createWebHashHistory to define the root of your Vue routes within the existing hash:

   import { createRouter, createWebHashHistory } from 'vue-router';
   import Home from './views/Home.vue';
   import MyNewApp from './views/MyNewApp.vue';
   
   const initialHash = window.location.hash.slice(1);
   // Define the base path for Vue Router using the random hash
   const routerBase = `/${initialHash}`;
   
   const routes = [
     // Matches the initial URL: app.com/#[random-hash]
     { path: '/', component: Home },
     // Matches the desired route: app.com/#[random-hash]/my-new-app/etc
     { path: '/my-new-app/etc', component: MyNewApp },
   ];
   
   const router = createRouter({
     history: createWebHashHistory(routerBase),
     routes,
   });
   
   export default router;
   

3. Test navigation behavior:

   • Vue Router will now append its routes directly after the random hash in the URL.
   • Using router.push('/my-new-app/etc') will update the URL to app.com/#[random-hash]/my-new-app/etc as intended.
   • Refreshing the page will re-extract the random hash and reconfigure the router automatically, preserving the current Vue route.

Key Considerations: #

• Ensure the PHP app's random hash does not contain slashes (standard for random strings). If it does, adjust the extraction logic to capture the full hash up to the first slash.
• Add a fallback for empty initial hashes (if your PHP app allows it) to avoid routing failures, such as redirecting to the PHP app's hash generation endpoint.

内容的提问来源于stack exchange，提问作者Michele Mirandola