I'm trying to get a child link from router to render so that the parent route stays active.
Here's my router:
{
path: '/portfolio',
name: 'portfolio',
component: () => import('./views/Portfolio.vue'),
children: [
{
name: 'portfolioitems',
path: '/portf/:id',
component: () => import('./views/portf.vue')
}
],
}
And my link on items to get page:
<router-link :to="`/portfolio/portf/${items.id}`"> item </router-link>
The url does go to /portfolio/portf/10 for example, but nothing renders on page.
Thanks for any help!
Replace path: '/portf/:id', with path: 'portf/:id', and let us know if it works. I faced the same issue before and the solution I am giving you worked for me. It might also work for you.
Related
I have a vue js application that is using the vue router. I have the following route:
http://server/stores/index.html#/ViewStore/:StoreId
If I change :StoreId in the url and press enter, nothing happens. I have to hit F5 to reload the page and have it process the new :StoreId.
I am using:
<router-view :key="$route.fullPath"></router-view>
In my App.vue component.
My routes are defined in routes.js as follows:
import Home from '#/components/Home';
import EditStore from "#/components/EditStore";
import ViewStore from "#/components/ViewStore";
export const routes = [
{ path: '/', redirect: '/ViewStore/NotFound' },
{ path: '/StoreListing/:DisplayTarget', component: Home, },
{ name: 'ViewStore', path: '/ViewStore/:StoreId', component: ViewStore, },
{ name: 'EditStore', path: '/EditStore/:StoreId/tab/:tab', component: EditStore }
];
I am also using:
watch: {
// call again the method if the route changes
'$route': 'LoadStore'
},
to reload my component data when the url changes, but still nothing. I'm not sure what I'm doing wrong. I'm getting the same results in IE 11 and Chrome.
First of all your URL look kinda weird to me bcoz it has index.html, at least it could have been something like:
http://server/stores/#/ViewStore/:StoreId
Anyhow, can you push programatically and see if you are getting expected result?
this.$router.push({ name: 'ViewStore', params: { StoreId: '1' } })
I am using vue2 routes set up by another dev but I am trying to change the 'redirect' currently set to go to the 'home' page.
This issue is that there is a page which when you first enter the page (for the very first time) a bootstrap modal is displayed. The issue I'm having is if I enter this page of the first time then change the URL, the 'redirect' is working as expected BUT the modal is also still displaying and I don't know how to make it close.
routes.js
import {store} from './store/store';
import Cart from './components/Cart';
import Stock from './components/Stock';
import Home from './components/Home.vue';
import Review from './components/Review';
import Order from './components/Order.vue';
import OrderReport from './components/OrderReport';
import AccountDetails from './components/AccountDetails';
import ExistingOrders from './components/ExistingOrders';
export const routes = [
{path: '', component: Home},
{path: '/order', component: Order},
{
path: '/review', component: Review, children: [
{path: '', component: ExistingOrders},
{
path: ':id', component: OrderReport, beforeEnter: (to, from, next) => {
let orderCount = store.getters.orderPaginator.items.filter(item => item.id === +to.params.id).length;
next(orderCount > 0);
}
}
]
},
{path: '/account', component: AccountDetails},
{path: '/stock', component: Stock},
{path: '/cart', component: Cart},
{path: '*', redirect: '/order'}
];
If I change "redirect: '/order'" to "redirect: '/'" it goes to my home page as expected but with the modal displayed. Is there a way to close on the redirect?
Page where modal should be displayed
**Changed URL to 'orders' and clicked 'Enter'
Directed to the correct page (Home page) but modal still displayed. Is there a way I can change the :key using routes or would I have to use something like this.$forceUpdate(), although I have read that this may not work in vue2 and is really a nice thing to do.
What's my best approach? Just to mention I am new to vue2
I had success with this approach.
You can use a feature called Global Before Guards in Vue Router.
Inside router folder index.js file:
const router = createRouter({
// not relevant to the answer
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
// remove modal backdrop if one exists
let modalBackground = document.querySelector('.modal-backdrop')
if (modalBackground) {
modalBackground.remove()
}
// do other stuff
next()
})
In my case I wanted to remove the modal backdrop but you can modify this to suit your needs.
Probably not the cleanest or best way to resolve the issue but the only way I could think of was to use the following in my 'home.vue' file
mounted() {
this.closeAccountSelectModal();
},
methods: {
closeAccountSelectModal() {
$('.modal ').modal('hide');
}
}
Used the class so all other pages which have modals will also be covered by it.
I know its too late but you can watch for route changes in components so when the route changes just close the modal
watch:{
$route (to, from){
// hide modal
}
}
I am new to Vue and want to navigate Product child routes, but it do not work & get NotFound page instead.
So my question is how to make it properly.
Or can someone give some details. Thanks
Online Editor
index.js
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/products',
component: () => import('../views/ProductPage.vue'),
children: productRouter
},
{
path: '/**',
component: NotFound
}
]
product.js
const productRouter = [
{
path: '',
name: 'products',
component: ProductPage
},
{
path: 'product/:id',
name: 'ProductDetails',
component: ProductDetails
},
{
path: '**',
component: NotFound
}
]
There are some little mistakes leading to your unexpected result.
In product.js router you should not prefix again with products since it is already in the scope of the /products route. The NotFound route is also not needed in this definition since the parent's NotFound already matches the same route patterns. You can rewrite the product router definition like below :
const productRouter = [
{
path: ':id',
name: 'ProductDetails',
component: ProductDetails
}
]
Then, in ProductList.vue, you should rewrite your router-link as below :
<router-link :to="`/products/${item.id}`"> {{ item.description }} </router-link>
Finally, in ProductPage.vue, you are missing the <router-view></router-view> needed to render your child routes as explained in the vue router documentation.. You could rewrite it like below :
<template>
<div id="productPage">
<h1>This is an Product Page</h1>
<ProductList :items="products"> </ProductList>
<router-view></router-view>
</div>
</template>
This is my router structure
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user/:id',
name: 'user',
component: User,
children: [
{
path: '',
name: 'page',
component: Page
},
.....
}
I used this in Home.vue to redirect (/user/12345)
<router-link
:to="{
name: 'user',
params: {id: user.userId}
}"
>
When I clicked this link in home page, it routes correct path however I can not render child component (Page.vue) However when I reload the page, child component is loaded successfully. (url is still same)
There is an only rendering issue when I click the link on the homepage. How can I get rid of this. Thanks in advance.
User.vue
<template>
<div>
<NavDrawer/>
<router-view></router-view>
</div>
</template>
Edit: Any help will be so beneficial for me. Thanks
I have my routes defined like this
{
path: '/menu',
component: () => import('./Menu.vue'),
children: [
{
path: 'admin',
component: () => import('./menus-admin/MenusAdmin.vue'),
name: 'menusAdmin'
},
{
path: 'import',
component: () => import('./menus-admin/menus-import/MenusImport.vue'),
name: 'menusImport'
}
]
}
When I navigate between the admin and import routes using router-link components, the parent Menu.vue component gets destroyed and created again. I would expect the Menu.vue component to no bet destroyed unless I navigate to a completely different route. This is a problem because I have implemented some lifecycle hooks that I don't want to be called over and over when the child routes change.
Am I doing something wrong? Is this a bug or is it a feature?
I found my problem. My <router-view> had :key="$route.fullPath" on it. That was forcing it to re-render everything on every route change.
Removed that and it worked as expected.