Vue direct URL is not working, only router-link click

Question

This may be a known Vue routing thing that I am totally missing.

So I have a .vue file that uses the url /hardware. Here is the routing

{
    path: "/hardware",
    name: "Hardware",
    component: () =>
      import(/* webpackChunkName: "hardware" */ "../views/Hardware.vue")
  },

Going to /hardware directly using a link on an external site or typing it in the address bar does not work, gives me Page Not Found. But clicking on this link in my nav bar does work.

<router-link to="/hardware">Hardware</router-link>

Am I missing something super obvious that I missed when I was learning routing? Is this because it is a single page application? Thanks in advance for any help.

Adding that I do have history mode on, wondering if this is the issue?

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

Have you add mode:'history' for your router config /hardware instead of routing to #/hardware ? — SC Kim
– SC Kim, Commented Jun 9, 2020 at 15:36
Turning off history mode fixes it, just turns the URL into /#/Hardware which is fine. — G_Man
– G_Man, Commented Jun 9, 2020 at 15:42
Alright i saw your edited const router. So the problem may lie on your base option. I didn't have issue on my vue-router gh-page of having / or not behind my param. Try remove the base option — SC Kim
– SC Kim, Commented Jun 9, 2020 at 15:44
That actually works locally but not on Netlify, must be a server configuration problem at this point then? — G_Man
– G_Man, Commented Jun 9, 2020 at 16:05

shA.t · Accepted Answer · 2025-04-16 16:40:42Z

5

Following back from comments to answer (Netlify) Vue-router works locally and not at the hosting/deployment side like Apache/Nginx/Firebase Hosting as:

Pretty-URL / Hashbang dilemma in SPA.
The server needs to redirect when your Vue project enabled history mode. in Apache, just some redirect rules needed to be done via .htaccess similarly, so as most of the hosting services included Netlify (you need to check the routes redirect rules at Netlify there). As server page not found, telling us that your route doesn't have actual files under that specified /route at their side.
Previous thread: Vue Router return 404 when revisit to the url
If your project for Multi-page-mode instead of going hashbang SPA, Your Vue Project needed to be configured little bit further: Either via SSR or pre-rendering static files before deployment

edited Apr 16 at 16:40

shA.t

17k5 gold badges59 silver badges121 bronze badges

answered Jun 9, 2020 at 16:21

SC Kim

6004 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shmallen · Accepted Answer · 2020-06-09 15:26:16Z

0

It could be that your browser is adding a trailing slash to giving you "/hardware/" which does not match your route. In the past, I had created an alias to match both routes such as "/hardware" and "/hardware/".

answered Jun 9, 2020 at 15:26

shmallen

134 bronze badges

1 Comment

G_Man Over a year ago

I have verified this is not happening. Creating an additional route is not working either.

tadvas · Accepted Answer · 2021-12-13 13:38:40Z

I faced the same issue nowadays and decided to share my thoughts with the community.

You can easily resolve the bug just by removing mode: "history" from the Router. Then it will be automatically replaced by the hash (#) in your URLs. It's going to work then even if you'll use a direct link in the browser.

However, based on the latest SEO recommendations History mode is more preferable because URLs without # are better tracked by Google.

If you would like to save History mode, you need to enable history mode on your server. I use Express middleware and the solution in my case is next:

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

app.use(history());
app.use(express.static('src'));

app.get('/', (req, res) => {
  res.sendFile('src/index.html');
});

app.listen(3000, () => console.log('server started'));

Jiu_Zou · Accepted Answer · 2024-12-23 06:13:55Z

this is my answer, it may be helpful https://stackoverflow.com/a/79302293/17601704

In vue router 4 for vue3

first

try to find the mounted APP.vue, when you refresh the webpage, the App.vue will be loaded firstly. So make sure you don't mounted this.$router.push("/")

  mounted() {
     this.$router.push("/");
}

the correct thing

mounted() {
    this.loading();
},
methods: {
  loading() {
    if(document.URL=="http://localhost:9000/" || document.URL=="https://zoujiu.com.cn/"
          || document.URL=="http://zoujiu.com.cn/" || document.URL=="http://localhost:9000/#/"
          || document.URL=="http://zoujiu.com.cn/#/"|| document.URL=="https://zoujiu.com.cn/#/"
        ) {
          this.$router.push({ path: '/'});
        }
  }
}

deployment

I use this history with nginx ssl https

const router = createRouter({
  // history: createMemoryHistory(),
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes:constantRoutes,
})

development

I use this history

const router = createRouter({
  // history: createMemoryHistory(),
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes:constantRoutes,
})

this is myown website http://zoujiu.com.cn.

Collectives™ on Stack Overflow

Vue direct URL is not working, only router-link click

4 Answers 4

Comments

1 Comment

Comments

first

deployment

development

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

first

deployment

development

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related