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>
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'm upgrading the package okta/okta-vue from version 1.3.0 to 3.1.0.
It also included installation of okta-auth-js package since version 2.0.0 of okta/okta-vue.
I followed the migration info according to the changelog and the migration guide:
https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/CHANGELOG.md
https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/MIGRATING.md
After following the guides, I recieve errors that seem to repeat themselves in the console such as:
[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read properties of undefined (reading '_router')"
TypeError: Cannot read properties of undefined (reading '_router')
TypeError: guard is not a function
[vue-router] uncaught error during route navigation:
The 3 first errors repeat themselves several times.
I tried looking on other topics and saw some answers speaking about "this" which might cause the problem, but it doesn't seem to be the issue in my case.
Following is the routes.js code:
import DashboardLayout from 'src/components/Dashboard/Layout/DashboardLayout.vue'
import Overview from 'src/components/Dashboard/Views/Dashboard/Overview.vue'
// import Auth from '#okta/okta-vue'
import { LoginCallback } from '#okta/okta-vue'
import {
routes_App1,
routes_App3,
routes_App4,
...,
routes_App99
} from './routesDefinition'
// Dashboard Pages
const UserProfile = () => import ('src/components/Dashboard/Views/Pages/UserProfile.vue')
const routes = [
{
path: '/implicit/callback',
name: 'Okta Callback',
component: LoginCallback
// component: Auth.handleCallback()
}, {
path: '/',
component: DashboardLayout,
redirect: '/overview',
meta: {
requiresAuth: true
},
children: [
{
base: '/',
path: 'overview',
name: 'Overview',
component: Overview
},
{
path: 'userprofile',
name: 'User Profile',
component: UserProfile
},
routes_App1,
routes_App3,
routes_App4,
...,
routes_App99
]
}, {
path: '*',
component: DashboardLayout,
redirect: '/overview',
meta: {
requiresAuth: true
}
},
]
export default routes
If for any reason it matters, my company's app is written with Vue 2 in the fronted and PHP - Laravel in the backend.
The app worked completely fine before upgrading the package.
Here are some of the related packages versions I'm using (after the upgrade):
vue#2.7.10, vue-router#3.6.4, #okta/okta-auth-js#4.9.2, #okta/okta-vue#3.1.0, webpack#5.74.0
If there's any other important files I need to attach as code please let me know and I'll add them.
Please help me if anyone knows what might be the solution for those errors.
Edit: I upgraded to Webpack 5.74 recently and it didn't change anything.
Thanks in advance, Gady.
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 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