I am on this url in google chrome:
http://mysite:7466/#lessonplanner
then I press F5 to refresh/reload the current site but the content is not reshown. I see an empty page.
In the console I see: Route not found
This is how my route is setup:
router.map([
{ route: 'lessonplanner', moduleId: 'viewmodels/lessonplanner', title: 'lesson planner', nav: true }])
.buildNavigationModel();
What do I wrong?
This is a classic example where i would split the lessionplanner into a module and include it in the view with the core data in it.
Then the actual view is reloaded which will work if it is linked properly.
Related
I have a homepage which is paginated, though when clicking "Next Page" it seems to be looking for a page named /page/1. Is there a way to paginate the index.vue page without creating a brand new page?
I've currently implemented the following on #click.
this.$router.push({
path: '/' + this.page,
query: { },
})
You can have dynamic parameters.
For example
url.com/1
url.com/2
So if your home page is index.vue, you need to create a vue file next to it for a dynamic parameter with name after an underscore, for example _id.vue
So the param after the root URL will be mapped to this page.
For more resources about file system and routing in NUXT
In my nuxt.config.js I added loading: '~/components/LoadingBar.vue'.
After deploying the site my custom page transition works, but only when the first page visited is different from the home page.
For example, if you visit this link and navigate from there to /About, or /Portfolio, you'll see my custom transition (blur effect + loading circle).
Now, click on the logo (my name, above the "Home" menu item): my custom page transition inexplicably resets to default Nuxt page transition, with the white loading bar at the very top of the page.
Not sure if that's a known bug with Nuxt.js, I can't think of anything in my code that could cause something like that. How do I fix it?
The page reloads once you click on the logo,
it seems you are using a simple <a> link instead of <nuxt-link>.
Set a name like this for your home route in router.js
{
name: 'home',
path: '/',
component: Index
}
then <nuxt-link :to="{ name: 'home' }">logo</nuxt-link>
I am going to use the simplest example to explain what I mean.
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
When the page loads for the first time the client side console logs 'page is fully loaded'. But when I click on a NuxtLink or RouterLink, I don't get a repeated log entry for the new page load.
If I use a standard link, then the console logs 'page is fully loaded' on page I visit, as it should. But it doesn't have the nice speedy page load as NuxtLink or RouterLink accomplishes.
In Rails, it has a similar feature called Turbolinks, but you can use .on('page:load',... to grab each page load.
Does anyone know how to fire the window-load per page load?
The <nuxt-link> component is similar to the <router-link> component.
In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page. This means that onload will only be triggered when the app is first loaded.
If you need to refresh and load the page every time you link to a new route, you can do this:
window.location.href = 'your link'
By linking to the page in this way, you can find from the network panel in the browser console that every time you load a page of type text/html from the server.
In my Vue app, I can click a link generated by <router-link>...</router-link> and visit a page like: /site/books/00666.html.
The routing config for this is:
{
path: '/books/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
So I changed the URI in the browser (Fx57) to: /site/books/00777.html to try to display the detail information of another book. It failed with this:
Cannot get /books/00777.html
and the debugger told me something like:
Content security policy is preventing from accessing a resource from 'self'`.
I searched on CSP but can't figure out how to make this working.
Update: To reproduce the issue, I use vue init webpack test and scafolded a blank Vue app with router support.
One new router is added:
{
path: '/book/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
In the default HelloWorld.vue, just add a few lines with <router-link>:
<ul>
<li><router-link :to="{name: 'BookDetail', params: {id: 12345} }">Book 1</router-link></li>
<li><router-link :to="{name: 'BookDetail', params: {id: 23456} }">Book 2</router-link></li>
</ul>
In the HelloWorld page, clicking the link above will take you to "localhost:8080/book/12345.html". Good.
Change the URI to "localhost:8080/book/23456.html". The browser prompts the same error as before.
Update 2： per hint below, I modified the URI pattern to '/books/:id' and it is working.
Further question: What shall I do if I want to add the .html suffix?
Is it possible to reconfigure a router.navigation to add/remove specific routes, and say have router.navigation automatically update the view?
My use case will be to have a route for multiple pages i.e. /page/A, /page/B and then to allow adding more while the app is running /page/C. I also want the navigation to show those specific pages in the menu: "Page A", "Page B" "Page C"
I believe there are parametrised routes available (route: 'page/:id'). But its not clear if you can give some context to the router.navigation to add some specific routes, via the parametrised route config.
Try this to add route:
this.router.addRoute({ route: "pageA", moduleId: "views/pageA", nav: true, title: "PageA" });
this.router.refreshNavigation();
To remove:
Inspect the Navigation model an remove the route that you want.