Vue.js URLs should not trigger http requests

[joshlong]

Is there a way to get the vue.js urls to start with # so they’re not picked up by the underlying web server when somebody hits enter on the manipulated URLs were sent

from Starbucks

Yes, the configuration I described works in modern versions of Vue.js, including Vue 3. The hash mode for routing is still supported in the latest versions of Vue Router, which is used with both Vue 2 and Vue 3.

For Vue 3 with Vue Router:

In Vue 3, the setup for Vue Router is slightly different, but the concept remains the same. You can configure hash mode as follows:

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(), // This sets up the hash mode
  routes
})

export default router

Explanation:

• createWebHashHistory: This function is used to set up hash mode in Vue 3. It ensures that your URLs will include a # symbol, like http://example.com/#/about.
• Routing Handling: All routing is managed by Vue Router on the client side, and the server will not receive requests for these routes.

Additional Notes:

• This approach is fully compatible with modern Vue.js applications using Vue 3.
• If you're migrating from Vue 2 to Vue 3, be aware that while the API has changed slightly, the overall concept of using hash mode remains the same.

This will work seamlessly in your Vue 3 application to prevent server-side GET requests for different routes.