Given url localhost:8080/resource/1 and configured route:
<stencil-route url="/resource/:id" component="my-resource" />
When I click a link link:
<stencil-route-link url='/resource/2'>Resource 2</stencil-route-link>
Then URL location changes and component doesn't reload. What can I do in that case?
Related
<button class="viewButton body" #click="this.$router.push({ name: 'Staff Profile', query:{obj: JSON.stringify(sdList[s.staff_id-1])} })">More Details ></button>
Desire output: To remove the information after obj (refer to the image above) --> /staffProfile?obj
This is what I have tried to do in order to remove but cannot get it working:
<button class="viewButton body" #click="this.$router.push({ name: 'Staff Profile', query:{obj: JSON.stringify(sdList[s.staff_id-1]), as: "/staffDetails"} })">More Details ></button>
You can use history.replaceState() to change the URL without navigating. Place this in the created hook of the page you're loading:
created() {
history.replaceState(history.state, "", "/staffProfile");
}
downsides include losing the query params if you manually reload the page or while manually navigating back to the previous page then forward. Only when clicking your button will the page load with the query params intact. If you need an alternative solution that always preserves this data, you might want to look into saving the query params using a state management library (Vuex or Pinia), or the browser's localStorage API
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
I want to create a landing page for a documentation and I dont any layout option. How can I create a landing that points to a Vue component directly?
---
layout: none
---
<Landing />
<script setup>
import Landing from "./components/Landing.vue"
</script>
I want one page to be empty. Just my component.
As it turns out there is no way to implement a page without layout page, home or doc in vitepress. More info.
My current Vue app is laid out as follows:
Such that login Vue would be live under VContent, and aspects of the header and nav are be disabled based on auth state. For example, logout button if store.isAuthenticaaed. See below:
If a Register exists on the login page leading to a registration Vue, how would I break that Vue out of the parent App.vue as to not display the header or nav at all? Should I move my header/wrapper down a level and if so how?
The below answer is totally based on how I understand your requirement, happy to correct if the assumptions are wrong.
Redirecting to which page can be handled at the router configuration.
As per your layout, I can see you have
<VApp>
<VBar />
<VContent >
<router-view />
</VContent>
<VNavigationDrawer />
</VApp>
Now, your store knows whether the user is authenticated or not.
So Why not simply remove <VBar /> and <VNavigation /> using v-if. However, you need to make sure that your state is having the correct state at the initial render.
I can simply create a computed property stating
showBarAndNavigation () {
return store.isAuthenticated && this.$route.name === 'Login' && // anymore handlers
}
<VApp>
<VBar v-if="showBarAndNavigation" />
<VContent >
<router-view />
</VContent>
<VNavigationDrawer v-if="showBarAndNavigation" />
</VApp>
I am able to use a parameterized route with the simple example from the Ionic PWA like this:
render() {
return (
<ion-app>
<ion-router useHash={false}>
<ion-route url="/" component="app-home" />
<ion-route url="/profile/:name" component="app-profile" />
</ion-router>
<ion-nav />
</ion-app>
);
This is picked up in the corresponding profile page with a simple #Prop like this:
#Prop() name: string;
But when I try to use a tab setup, I can't seem to get access to the parameter. This does not work:
renderRouter() {
return (
<ion-router useHash={false}>
<ion-route-redirect from="/" to='/blog' />
<ion-route component="page-tabs">
<ion-route url="/blog" component="tab-blog">
<ion-route component="page-blog"></ion-route>
</ion-route>
<ion-route url="/photos/:name" component="tab-books">
<ion-route component="page-photos"></ion-route>
</ion-route>
</ion-route>
</ion-router>
);
}
How can I get access to the parameter from down in the page-photos component that is loaded in the tab-books tab? I am not using any framework other than Ionic / Stencil PWA (no Angular, React, or anything else). I'm trying to create a pure web component solution with no framework use. Can Ionic support this use case?
The solution, I found, was to set the url to the tab component to be only the base of the full URL (/photos/:name). Then, set the page component's url to be just the parameter part as follows:
<ion-route url="/photos" component="tab-books">
<ion-route url="/:name" component="page-photos"></ion-route>
</ion-route>
With this setup, /photos/name, will navigate to the 'tab-books' tab, which will load up 'page-photos', which will properly obtain the name parameter via the following in the page-photos component:
#Prop() name: string;