CODEWITHSUNDEEP
vue.jsvue-router
G_Man
G_Man

Reputation: 1343

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

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
});

Upvotes: 6

Views: 12953

Answers (4)

Jiu_Zou
Jiu_Zou

Reputation: 571

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.

Upvotes: 0

tadvas
tadvas

Reputation: 171

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'));

Upvotes: 0

SC Kim
SC Kim

Reputation: 600

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

1) 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

2) 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

Upvotes: 5

shmallen
shmallen

Reputation: 13

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/".

Upvotes: 0

Related Questions