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.
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>
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?
I'm new to the whole routing thing in MVC so I'm not sure what to make the title of my question. Basically, we have Google Analytics that pics up stats based on the current url. We added in a referrer to the route so that we can give a link to our partner sites such as:
http://www.mysite.co.za/PartnerSite/home/index
When the user comes to our site directly, ie: http://www.mysite.co.za, I want the url to show "Website" as the referrer.
So in essence,
http://www.mysite.co.za
must change to
http://www.mysite.co.za/Website/Home/Index
My route is current configured as:
routes.MapRoute(
name: "Search",
url: "{referer}/{controller}/{action}",
defaults: new { referer = "Website", controller = "Home", action = "Index" }
);
Can this be done in the routes or should I get my system administrator to update IIS settings and redirect?
Thanks,
So to close this off I needed to have a solution posted.
The bottom line is that this is something for IIS, and it does not seem possible using Routes.
ok,suppose when the user hits the url http://www.mysite.co.za then suppose it accessing Home Controller's Index View Action.Because /Home/Index is the First Default Page in MVC so its not the Part of URL.
So for your Case You should write the code like this-
routes.MapRoute(
name: "Website",
url: "/Website/Home/Index",
defaults: new { controller = "Home", action = "Index" }
);
Please Try it and let me know the result.
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.