This question already has an answer here:
Vue 3 router - router-link-active not working
(1 answer)
Closed 6 months ago.
I am currently in my Vue learning journey. I have come across a situation where I need to show my link as active for matching route too. For example: I have route /programs which shows Program link as active without any issues but I also want /programs/view to set Program link as active as well. How do I do it in Vue Router?
These are my route definitions in router.js file
const routes = [
{ path: '/', component: Main, name: 'main', redirect: '/dashboard', children:
[
{ path: '/dashboard', component: Dashboard, name: 'dashboard' },
{ path: '/programs', component: Programs, name: 'programs' },
{ path: '/programs/view', component: ViewProgram, name: 'view_program'},
...OTHER ROUTES
]
},
{ path: '/login', component: Login, name: 'login', meta: {noAuth: true} },
{ path: '/:pathMatch(.*)*', redirect: '/dashboard'}
];
I searched and found that router-link-active class should be automatically applied to Program link when the route starts with /programs, but it is not working in my case.
EDIT
I have found a workaround by manually matching route and appending active class to the router link. But I still expect an easier way to do this.
In my Program link:
<router-link to="/programs" :class="{'router-link-active': $route.fullPath.match(/\b\programs/) }">
<span>Programs</span>
</router-link>
I am using regex to match path pattern. So, every route that contains programs will get active class here.
dont u gotta do that in the component and not in the router?
take what i say with a grain of salt im
Related
I have a route setup where there's a parent with child routes, like this:
{
//name: 'ProductComments',
path: 'comments',
children: [
{
name: 'ProductComments',
path: '',
component: ProductComments
},
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
With the above configuration, Vue Router will render my ProductComments component if I visit /comments. However, if I comment the name out and uncomment it on the parent, it won't render the ProductComments component and will give me the warning:
The route named "ProductComments" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.
But why is this? The child is always a more "specific" route, so why does giving it a name magically cause it to render, whereas giving the name to the parent stops it?
I think this is one of those things that was decided by the Vue team and only they can really answer why. I was curious about it though and found this
github thread talking about the exact same thing. Doesn't seem like a satisfactory answer was ever found but the comment I specifically linked contains a workaround which is just adding a redirect:
{
path: '/user/:id',
name: 'user',
/* Explicitly tell the router to redirect to default children */
redirect: '/user/:id/',
component: User,
children: [
{
path: '',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
Set everything in the parent; it makes more semantic sense too.
My parent/child routes function like this. I haven't had any problems with this (so far?).
{
name: 'ProductComments',
path: 'comments',
component: ProductComments
children: [
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
I have a few dynamic routes like this:
path: '/group/:id',
name: 'Group',
I need to edit the group contents in a separate view, which is not a modal, and pass some data to it. The link should be something like this
... group/3/edit
Child routes seem different. Which concept should I explore to do it?
PS: I found the solution that seems too simple.
I just created a separate route:
{
name: 'EditGroup',
path: '/group/:id/edit',
component: EditGroup,
props: true
},
And pass the id as a prop from task component. Would it be a sound approach?
this should do
path: 'group/',
children: [
{
path: '',
name: 'groupView',
},
{
path: ':id?/',
name: 'groupIdView',
},
{
path: ':id?/edit',
name: 'groupIdEdit',
}
]
where your first child will be you group view
second will be the id view
and lastly the edit view
I think this will work for you.
Assuming that you use nested children route.
nested routes
https://router.vuejs.org/guide/essentials/nested-routes.html
path: 'group/',
children: [
{
path: '/group/:id/edit',
name: 'child-group',
props: true,
},
]
you may also use props and pass it to router link as params.
set props to true
https://router.vuejs.org/guide/essentials/passing-props.html
This is similar to a lot of questions asked re: setting up Vue Router with an Express server using the connect-history-api-fallback middleware as directed in the Vue Router docs, but I’m still running into two issues:
When I refresh any page, I am redirected to my Home route (e.g. http://localhost:8080/451)
When I enter a direct link in the address bar (e.g. http://localhost:8080/451/alerts), I am also redirected to my Home route
I am not receiving a “Cannot GET /” error, so I am pretty confident that connect-history-api-fallback is implemented correctly.
For context, this is what my router looks like:
const router = new VueRouter({
base: __dirname,
mode: 'history',
routes: [
{
component: Home,
name: 'home',
path: '/:siteId',
},
{
component: SuperAdmin,
name: 'super-admin',
path: '/:siteId/super-admin',
},
{
component: Alerts,
name: 'alerts',
path: '/:siteId/alerts',
},
{
component: LPRAdmin,
name: 'lpr-admin',
path: '/:siteId/lpr-admin',
},
{
component: ControlCenterAdmin,
name: 'control-center-admin',
path: '/:siteId/control-center-admin',
},
],
});
And this is my configuration in the server:
const staticFileMiddleware = express.static('build/public');
app.use(staticFileMiddleware);
app.use(history({
verbose: true,
}));
app.use(staticFileMiddleware);
Has anyone dealt with and solved this or a similar issue? Thanks in advance!
For anyone who comes across this in the future, we were able to solve it! Somewhat embarrassingly, we forgot we were rerouting users to the home page after authentication every time the app mounted. We removed
this.$router.push(`/${siteId}`);
from our App.js and the issues are resolved!
I want to open the same page but by using two different routes. The issue is when clicking on link 1 and after that click on link 2 my page is not being refreshed, when I print this.$route it shows old route info. How to solve this issue?
Link 1 - http://localhost:8080/test1route
Link 2 - http://localhost:8080/test2route
import TestComponent from '#/Component/TestComponent'
export default [{
path: '/test1route',
component: TestComponent,
children: [{
path: '/',
component: () => import('#/List')
},
{
path: '/test2route',
component: () => import('#/List')
}]
}]
Based on your route definition, the path to Link2 would actually be http://localhost:8080/test1route/test2route, since 'test2route' is a child of 'test1route'.
I am using Vue("vue": "^2.5.2") to make a SPA,this is my route("vue-router": "^3.0.1"):
routes: [
{
path: '/',
name: 'Home',
component: Home
}]
when I request : http://localhost:8080.It could open the page.But when I tweak the route like this:
routes: [
{
path: '/home',
name: 'Home',
component: Home
}]
And I request : http://localhost:8080/home .It could not open the page.Why would this happen ,how to fix it?
As stated in the vue router docs:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
You should find your page at http://localhost:8080/#/home
You can read more about this here