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)!
Related
I just deployed my Vue app to my website using GitHub Pages.
The website is successfully hosted at https://astroorbis.com.
Here's the problem; When you click the "links" button at the top of the page, it successfully nagivates you to https://astroorbis.com/links, but when you try visiting the URL itself (typing in https://astroorbis.com/links) into your browser, it returns a 404.
There are other links that have the same error, such as /discord, /github, etc.
I tried the solution at Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links, but it failed as well.
What would be the solution for this?
As stated in this section of the HTML5 mode
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
So, the solution would be to use something like that
const routes = [
// will match everything and put it under `$route.params.pathMatch`
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]
On Netlify, you also need to add the following for it to work
/public/_redirects
/* /index.html 200
So I'm not sure about Github Pages but you should have something similar there, some way of catching all routes and sending them to the index.html of your initial SPA page load.
Otherwise maybe just give a try to Netlify with the _redirects configuration.
Maybe this article could help regarding Github pages.
The hack in your given link seems to be the only viable solution but it's still bad for SEO so yeah, depends if you want any (I guess so).
In that case, you could try Nuxt.js, Gridsome or Vitesse if you want to have some statically generated pages (best approach regarding SEO).
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',
});
Vue Route can’t read the link when Refresh Browser in hexadecimal
The route is Arabic language in alias and route
Example You can visit sandbox:
jmbz0.csb.app/تواصل
Dependecy
Vue 3
Vue Route 4.0.3
regard
The quick fix Use encodeurl As the answer form #posve vue-route team I open issues link below
The Answer for Encode problem
Document how to use correctly encoded paths
Regards
I have a single page Vue application that uses hash history for the URLs (i.e. https://www.myapp.com/#/sign-up). I have another website that is using Wagtail as a CMS tool that is attempting to link to my vue spa using an anchor tag but it doesn't appear to be working. The website with the anchor tag was built with a pre-made theme using jQuery.
<a class="btn btn-sm btn-primary transition-3d-hover" href="https://www.myapp.com/#/sign-up">
I expect clicking the link will take me to my sign-up page but nothing happens, I see this on the console log when clicking the link:
Uncaught Error: Syntax error, unrecognized expression: #/sign-up
at Function.oe.error (jquery.min.a2530ed98bf8.js:2)
at oe.tokenize (jquery.min.a2530ed98bf8.js:2)
at oe.select (jquery.min.a2530ed98bf8.js:2)
at Function.oe (jquery.min.a2530ed98bf8.js:2)
at Function.e.find (jquery-migrate.min.05689c22f0c8.js:59)
at w.fn.init.find (jquery.min.a2530ed98bf8.js:2)
at e.fn.init.w.fn.init (jquery.min.a2530ed98bf8.js:2)
at new e.fn.init (jquery-migrate.min.05689c22f0c8.js:43)
at w (jquery.min.a2530ed98bf8.js:2)
at HTMLAnchorElement.<anonymous> (scroll-nav.787831ada42e.js:16)
Navigating to the url https://www.myapp.com/#/sign-up does work as expected, just not through clicking the link. I'm relatively new to front-end development and am lost on what could be causing the problem.
I am not that clear about the question and maybe not the best person to answer, but typically you need to configure your server with a URL Rewrite to be able to work with an SPA application, but if that was the issue you wouldn't be able to open that url directly either but you say that you can. So I am not sure what the issue is. I suggest that you take a look at this link also related to configuring the server.
Don't use hashbang navigation as it's deprecated since 2015. Instead use VueRouter to get rid of your hashbang and configure your server-side app to redirect all routes to /, letting Vue handling the routes.
const router = new VueRouter({
mode: 'history'
})
Thanks to Thomas Edwards line of questioning it lead me to the answer:
The website attempting to link to my SPA indeed had some jQuery code on it for autoscrolling behavior where the function was preventing default behavior for all hashed links.
I'm getting started with Durandal JS and so far it's working great.
I have an issue though - ALL my links are being intercepted by Durandal's Router (Sammy JS under the hood). How can I get it to leave my links alone?
If there is a Sammy JS-specific alternative to the hashtag as a href to make the browser think it's a link, that'd be awesome too.
Durandal's router.js is an optional component, so if you don't need it you can remove the script tag that loads sammy.js and remove durandal/plugins/router as dependencies in your AMDs.
If you need to partially protect some links from being handled by router then guardRoute http://durandaljs.com/documentation/Router/ is probably your best bet.
This assumes that you're running Durandal 1.2 and not the latest code from github (work in progress), where router.js just got completely rewritten and has no dependency on sammy.js any longer.
I'm using the following in anchor tags href elements:
href="javascript:void(0);"
and it seems to be working.