I have a delete action in Nuxt application. And after a successful delete I need to redirect the user to another page. But in Nuxt router documentation, there is no mention about redirecting. So the question is how to do it in component?
You can totally use either
<nuxt-link :to="{ name: 'my-fancy-route' }">Go to</nuxt-link>
or
this.$router.push({ name: 'my-fancy-route' })
Depending on what you're trying to achieve here.
Also, all of your routes can be found with the Vue devtools, go to Routing > Routes and you will be able to see them all there.
For more info, Nuxt is using vue-router behind the curtains, so a reference to this part of the documentation will be good: https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort
As mentioned, you can use this.$router.push(yourPath) to redirect the user. You should be able to use either the route name or explicit path in place of yourPath. If you're unsure of the route names generated by Nuxt, you can view them in .nuxt/routes.json.
Note that Nuxt uses Vue router so, for more detailed documentation, you might want to read this.
this.$router.push({
path: '/your-path',
});
Related
I'm working on a Vue 3 app (using Quasar) with Vue Router. I want the user to be able to click on certain links (with paths beginning '/api/') which bypass the router completely and go straight to the backend API. But everything is getting picked up instead by the catch-all route (path: "/:catchAll(.*)*"). I tried adding a route without a matching component, path: "/api/*", but that doesn't work.
Is there a way for me to tell the router to ignore certain paths and let them be handled by the server?
I do not know the difference between using Router replace and route redirect
and how to use them in my project I am new in vue.js
The Documentation should give you all information necessary.
But to answer your question:
router.replace() replaces the current entry in the history stack, while route.redirect() actually redirects to another path, having both in the history stack.
a redirect will be triggered before any navigation guard and trigger a new navigation to the desired path.
I'm using Nuxt / Vue and in my site header router links. The problem I am seeing is when I click the router link to a path:
<nuxt-link to="/product-innovation/type">
<span class="link-brdr">Product</span>
</nuxt-link>
the route changes to the path : /product-innovation and not /product-innovation/type
if I click the nuxt link a second time it then will navigate to the correct page route.
At the end, the issue was about a previous developer who had some strange way of using router.push.
OP was able to solve it by himself thanks to some tips (mainly vue devtools, routing tab)!
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
});
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
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/".
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'));
Reading through the Vue Router docs this seems like it should be pretty simply, but I can't get it to work.
First I tried to use the file in S3
{
path: '/rules',
redirect: 'https://s3.amazonaws.com/itsclarke/vue-project/pdfs/rules.pdf'
}
This resulted in the redirect being appended to localhost:8080/#, so I got localhost:8080/#/https://s3.amazonaws.com/...
Also tried using the same approach with the static folder:
{
path: '/rules',
redirect: '../../static/rules.pdf'
}
This kept the path relative, but inestead of showing the pdf, it took me to localhost:8080/#/static/rules.pdf which isn't the path. localhost:8080/static/rules.pdf is what I need. This needs to use hash mode as well.
Using alias mode isn't much help either because I don't have components for these files. I know these redirects can be down on the server level, but I want to do it within Vue Router.
I don't think this is possible out of the box with vue-router - it expects the redirect value to be another client-side route, not a server-side url. I think your best bet would be to use a beforeEnter guard on your /rules route to redirect (using window.location) to the url. Alternatively, you could have your /rules route return a component that displays the pdf in an iframe.