CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5761

VueRouter navigation to hash without # symbol?

I am using router-link to navigate over my Vue/Laravel8 single page app:

  <router-link :to="{ hash: 'about' }">About us</router-link>

This method unfortunately leaves an ugly # symbol in the url:

localhost:3000/#about

Is ther any conventient way to get rid of the #?^

Edit:

It was suggested to use history mode but this is a router link to hash. I have history mode enabled already but it doesn't remove the # from the url.

router.js:

import Vue from "vue";
import VueRouter from "vue-router";

import Home from "../vue/home";
import About from "../vue/about";

Vue.use(VueRouter);

export default new VueRouter ({
    mode: "history",
    routes: [
        {path: "/", name: "home", component: Home},
        {path: "/about", name: "about", component: About},
    ],
    scrollBehavior(to) {
        return {
            selector: to.hash,
            behavior: 'smooth'
        }
    }
});

web.php:

<?php

use Illuminate\Support\Facades\Route;


Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

Upvotes: 1

Views: 1564

Answers (3)

Mhammed Talhaouy
Mhammed Talhaouy

Reputation: 1259

You would actually just want to set mode to history:

const router = new VueRouter({
  mode: 'history'
})

make sure your server is configured to handle these links,though:

history mode

Upvotes: 1

Joseph
Joseph

Reputation: 4685

# means hash router, the hash router doesn't require HTML5 history API, which is convenient when you can't redirect every request to /index.html when you're building a single-page web app.

What you are looking for is BrowserRouter, which requires using HTML5 history API and requires you to redirect every request to /index.html in order to work, because it's a client router, not from a server.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Simply add mode: 'history' and you're using BrowserRouter now.

More: https://router.vuejs.org/guide/essentials/history-mode.html

Upvotes: 2

Quentin
Quentin

Reputation: 943193

No. The hash sign is essential for using hash mode (hence why it is in the name). It indicates the start of the fragment identifier (which is used for in-page navigation).

If you didn't use the hash, then you've be using HTML5 history mode and navigating to a different path which would need to be handled by the server.

(As an aside, you might want to look at this answer which covers a similar question from the opposite direction for React).

Upvotes: 0

Related Questions