I have a Nuxt page and i want to change route path without re-rendering or refreshing page with a method on a button.
if i do this.$router.push() or replace(), page will refresh and if i do window.history.pushState() or replaceState() that works fine but after that if i add a query with this.$router.push({ query: a = b }) on my page, page will refresh because changing route with window.history will not change $route and when i use this.$router.push, Vue Router thinks its a different page.
I've done a lot of search on internet and did not find anything, so please don't label this question as duplicate.
What you're actually looking for is a Default Layout and some nested routes. Here is an example on how to achieve this in Nuxt with just a few steps: https://nuxtjs.org/examples/routing-nested-pages
Finally i solved this problem with using parent page and nuxt childs, i changed tabs to nav and rendered base components on parent page and other things on child pages and now it works fine. Tnx to #kissu and #Braks.
Related
When an update for my app is released, I would like all users to access the new version asap.
I'm looking for a way to disable all nuxt-links normal internal routing and reload the page to the new url when an update is detected.
Is it possible to change this globally? (without adding code to every nuxt-link):
Remove the nuxt-link bahavior from nuxt links that are already <a href links?
Update the nuxt-link behavior to do a location.href = instead of the internal navigation (for links on non-a elements or router.push)
In this case you could build a wrapper component that you will use instead of <NuxtLink> which contains the wanted functionality and passes props and events to the <NuxtLink> component otherwise.
I'm trying to create a simple nested routing:
App (root component, main navigation)
Topic1 (sub-navigation)
Topic1/Sub
Topic2
My demo on Codesandbox has the following issues:
1. When navigating from /topic1 to /topic1/sub, I expected the content from topic1 to show up and the content from topic1/sub to be shown below, like this:
However, Topic 1 does not show anymore.
2. How can I avoid showing "App" twice?
I know I've added path: "/topic1", component: App, but only because without it the routing did not work at all. As per the comments in router/index.js:
component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
I seem to be missing something essential - thank you already for any answers.
App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn't use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.
Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:
<h1>Topic1</h1>
<h2>Topic1 Content</h2>
<p>
<router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>
Here is the working codesandbox.
Also I refactored a bit your router index.js.
I want to display some of my pages (Vue components) on a modal, exactly the same identical components or routes that I've been using in my project, but the only difference is this time they won't be on the whole page but on a modal. I though I could use iframe but when I try to put the component name to :src attribute of iframe, Vue gives me <compName> is defined but not used error. Is there a way to put a component inside an iframe? I tried to use 3rd party npm packages like vue-friendly-iframe but couldn't get what I want. Any help would be appreciated. Thanks in advance!
I am using nuxt version 2.8.1 for my website. Everything works fine, except nuxt-link on some pages.
I have a page, /drinks which is the listing page for drinks and /drinks/{slug} which is the detail page.
I first noticed the problem, in /drinks. None of the nuxt-link was working in that page. It got solved when I removed code that displays
validation error message from the form that is in separate component.
<span class='text-danger small'>{{ errors ? errors.first('name') : '' }}</span>
So, everything works on this page now. But, the detail page still has this problem. There is no components using validation in this page. No erros or warnings, in nuxt console, or browser console. Links just doesn't work. It updates the url, but, contents are not changed at all.
changing nuxt link to anchor tags works.
Another thing is, if I click any drinks in listing page to go to detail page, it works fine. Every link works. But, if I reload that page, or go to that detail page directly with URL, then nuxt link doesn't work.
I don't know, what is the problem exactly. How can, using vee validation in one component affect nuxt link in other components? And why is it not working?
Found the culprit finally. In case, anyone face similiar issue in future.
Vee Validate didn't support ssr, thus, it caused the problem with nuxt-link.
I am using another plugin Vue Carousel which doesn't support SSR as well.
So, wrapping carousel with solved the issue.
And, another weird thing, using v-html with p tag also affected nuxt-link.
So, I removed all p tags with v-html, used no-ssr for components that does not support SSR and the issue is finally gone.
But, I still do not understand why nuxt link is affected and why there are no error messages.
Using vue-router 3.0.6
I have several landing pages, whose URLs are loaded on page load via an API.
I wait to render <router-view /> until this API call has resolved.
When it has resolved I run this.$router.addRoutes(routes)
However once router-view is render, I get a 404 route rendered.
If I navigate to the homepage and click a link to the dynamic landing page I was originally trying to access on load it works fine.
Is there some function to get vue-router to re-evaluate it's available routes, something that might be happening during the route change to the homepage that allows the next navigation to the dynamic page work?
First load -> /dynamic-route = 404
First load -> /dynamic-route -> 404 -> homepage -> /dynamic-route = OK
Old question but if anyone is stuck on this, you need to perform the operation that sets the routes before calling Vue.use(router) in Vue 2 or app.use(router) in Vue 3.
This is because installing the router plugin immediately triggers an operation to match the initial path. Since the route you wish it to detect is not registered at that time, it gets missed.
It does not matter if you show/hide the router-view component based on a flag variable since the path matching operation has already been completed by then.
when you match /dynamic-route directely, maybe the addRoutes did not work. so it would math 404.
you can make the function of addRoutes work using the function of beforeEach when you change your route.