I'm trying to get the current route of a component but router.currentRoute is showing some weird behaviour.
router.currentRoute shows the expected route /admin:
RefImpl {__v_isShallow: true, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: {…}}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
__v_isShallow: true
_rawValue: {fullPath: '/admin', path: '/admin', query: {…}, hash: '', name: 'login', …}
_value: {fullPath: '/admin', path: '/admin', query: {…}, hash: '', name: 'login', …}
value: Object
fullPath: "/admin"
hash: ""
href: "/admin"
matched: [{…}]
meta: {}
name: "login"
params: {}
path: "/admin"
query: {}
redirectedFrom: undefined
[[Prototype]]: Object
[[Prototype]]: Object
but router.currentRoute.value shows route /:
{path: '/', name: undefined, params: {…}, query: {…}, hash: '', …}
fullPath: "/"
hash: ""
matched: []
meta: {}
name: undefined
params: {}
path: "/"
query: {}
redirectedFrom: undefined
[[Prototype]]: Object
hence I can't use router.currentRoute.value.path which should show the current route. Is this behaviour expected? How do I get the current route of the component?
Given by the formatting it seems you are using console.log (or similar) API to observe the code effects.
Note that what almost all modern browsers shows in the console is the "lazy" view of the object (when logging objects)
Check this example (which roughly follows the data structures used by Vue Router)
Open example
Open Dev Tools - Console
Click the button twice or more
Only now explore the logged values
Result: Each log of router.currentRoute shows exactly same value (opposed to logs of router.currentRoute.value)
Now try the same thing but unfold the logged object after each click...
TL:DR Do not trust the console! - the value you see is not necessarily the value of the object at the time console.log was executed.
To workaround the issue use console.log(JSON.parse(JSON.stringify(obj))) instead...
Related
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
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
I'm looking for a solution to get the current situation:
Pages - domain.com/page-name (example: /contact)
Categories - domain.com/category-name (example: /blog)
With Vue I'm unable to create this with the slug as a prop.
{
path: '/:slug',
name: 'Page',
props: true,
component: () => import('../views/Page.vue')
},
{
path: '/:slug', // /category/:slug will work but I would like /:slug als path
name: 'Category',
props: true,
component: () => import('../views/Category.vue')
}
I know that a different path wil fix this, for example: '/category/:slug' but I'm looking for a way to create clean URLs without a prefix. Is this possible?
I'm using Vue Material, and their md-tabs component to manage the application tabs (Home, Profile ...).
I'd like to create a /404 page, which obviously cannot be a tab :)
To do so I simply add a /404 entry to the router:
const routes = [
{ path: '/home', name: 'Home', component: Home },
{ path: '/profile', name: 'Profile', component: Profile },
{ path: '/404', name: '404', component: NotFound },
{ path: '*', redirect: '/404' },
];
It works, but on the /404 page I get the error:
Uncaught TypeError: Cannot read property 'parentNode' of null
at eval (webpack-internal:///./node_modules/vue-material/dist/vue-material.js:14093)
The error disappears whan adding an md-tab for the /404, which is not a solution XD
<md-tabs md-sync-route class="md-primary">
<md-tab id="tab-home" md-label="Home" to="/home"></md-tab>
<md-tab id="tab-profile" md-label="Profile" to="/profile"></md-tab>
<md-tab id="tab-404" md-label="404" to="/404"></md-tab>
</md-tabs>
Is there a way to fix this?
Thank you !
This should fix your issue:
<md-tabs router-link>
<md-tab md-label="Foo" to="/foo">foo</md-tab>
<md-tab md-label="Bar" to="/bar">bar</md-tab>
</md-tabs>
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