Migration guide says:
Named children routes with an empty path no longer appends a slash
his has an important side effect about children redirect records like these:
const routes = [
{
path: '/parent',
component: Parent,
children: [
// this would now redirect to `/home` instead of `/parent/home`
{ path: '', redirect: 'home' },
{ path: 'home', component: Home },
],
},
]
Notice:
// this would now redirect to /home instead of /parent/home
But I would like to redirect to /parent/home instead of /home
Docs:
https://router.vuejs.org/guide/migration/#named-children-routes-with-an-empty-path-no-longer-appends-a-slash
So how can one achieve original behaviour before this change with new router? I would like to have relative redirect to a child.
Vue2 playground it works as expected.
Vue3 playground broken by change.
Related
Given the following route to the UserIndexPage in vue-router:
{
path: '/user/:userId/:orderId?',
name: 'userIndex',
props: true,
component: UserIndexPage
}
I'm aware that :orderId? makes this parameter optional. Now, I'd like to preprend a path to the orderId, that is, both of the following paths should match and route to the same component:
/user/:userId
/user/:userId/order/:orderId?
Is vue-router capable for this?
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
}
]
}
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
In a normal Vue (not Nuxt) project generated by vue-cli, using * in vue-router like this works:
export default new Router({
routes: [
{
path: "/about",
name: "about",
component: About,
children: [
{
path: "*",
component: About
}
]
}
]
});
All these routes works:
/about
/about/123
/about/123/abc/123/abc
Is there a way to do this in NuxtJs ? In Nuxt, routes are generated automatically from the files in pages folder. but * is an invalid character for file/folder name.
You use _ to denote that it's a wildcard, like:
pages/about/_.vue
Will resolve /about/*, which is what I believe you're looking for
And if you want the dynamic directory structure:
pages/about/_/abc/_/abc.vue
Would resolve for about/123/abc/123/abc (but it doesn't make much sense)