I am using Nuxt to create my application and I have a group of pages that are related in a way.
So I will simplify things a bit but my current structure looks like this
/pages
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
This folder structure is creating /login, /registration, /forgot-password, /resend-confirmation-email routes, which is cool.
So, in a way I can group first four pages to a group and name it authorization.
Ideally new folder structure should look like
/pages
/authorization
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
However what I would like is for the router to not get messed up, I would very much like for those routes to remain the way they were.
Is that possible?
So with no plugins and stuff, what I did was replacing the folder name from route object in extend routes function.
File nuxt.config.js
router: {
extendRoutes(nuxtRoutes) {
nuxtRoutes.map(route => {
route.path = route.path.replace('/authorization', '');
route.name = route.name.replace('authorization-', '');
return route;
});
},
....
}
This looks like a hack to me, but it actually does exactly what I want. For some larger projects I might consider fully overriding the router but this is kinda okay for now.
You can use nuxt router extras module
https://github.com/alibaba-aero/nuxt-router-extras/blob/dev/README.md
<router>
path: /posts
</router>
Related
Question:
What is the proper way to define an alias for external links in vuepress2 or vuejs?
Problem:
I have a documentation site hosted in github pages, I want to link some source files to documentation.
[task-runner.json](https://github.com/alirezanet/Husky.Net/blob/master/.husky/task-runner.json)
this works but I rather create an alias for the base path. something like this:
#repo :
https://github.com/alirezanet/Husky.Net/blob/master/.husky/task-runner.json
and use it like this
[task-runner.json](#repo/.husky/task-runner.json)
Notes:
because vuepress2 is using vuejs3, probably vuejs solution works too
vuepress default-theme also has repo configuration, is there any way to use it in router-links or md-files?
import type { DefaultThemeOptions } from 'vuepress'
export const themeConfig: DefaultThemeOptions = {
docsRepo: 'alirezanet/husky.net',
repo: 'alirezanet/husky.net',
}
I´m trying to use a different set of routes for each vhost
module.exports = function(app) {
app.use(vhost('www.example.com', exampleRoutes))
app.use(vhost('*.example.com', subdomainRoutes))
}
My problem is that www.example is also using the routes from subdomainRoutes
I need to somehow specify that if I´m under www then only the exampleRoutes should work
update. looks like I can use a regexp. I will need something like
not(www.example.com) but I´m terrible with regexp :(
laving this here in case someone needs it.
const regex = new RegExp('^(?!.*www.example.*).*$');
app.use(vhost(regex, subdomainRoutes))
What would be the best implementation of i18n. It's for a webapp so I don't want to update the url based on locale.
I am using nuxt frameworks so I researched nuxt-i18n but that's not possible without updating the url.
in nuxt.config.js/ts
i18n: {
...
strategy: 'no_prefix',
...
}
to change the locale, use something like:
changeLocale() {
this.$i18n.setLocale(this.$i18n.locale === 'en' ? 'tr' : 'en')
}
I tried to create a simple example, but we can still improve.
In this approach, I tried to use cookies instead of the path, and to do so I need to make a refresh page when we switch languages or else our components wouldn't load the new translations.
Check here: https://codesandbox.io/embed/example-i18n-mo8t7?fontsize=14
I cannot use route parameters with app.use on Express 4.16.2.
I have a statement like this:
app.use('/course-sessions/:courseSessionId/chapter-sessions', chapterSessionsRouter)
And, in chapter sessions router:
// Index.
router.get('/', ...resource.indexMethods)
When I got '/course-sessions/0/chapter-sessions/', I have 404.
Then I am trying a statement like this:
app.get('/course-sessions/:courseSessionId/chapter-sessions', ...chapterSessionResource.indexMethods)
Now I have the result I want. So route parameters don't work with app.use.
While I am researching, I got this GitHub issue and this pull request which closes the issue. But it seems that the issue is still around here. Or do I make something wrong?
You have to setup your router in a different way, try using mergeParams to access parameters in parent routes.
let router = express.Router({ mergeParams: true });
See docs: http://expressjs.com/en/api.html
I’d do only app.use('/course-sessions/', chapterSessionsRouter) and handle the id inside the router.
I'm trying to see if there is a way to do areas in Durandaljs
Something along the lines of
/App/areas/home
/views
/viewmodels
/other
/views
/viewmodels
I see the viewLocator allowing this convention:
viewLocator.useConvention('viewmodels', 'views', 'areas');
but the router.useConvention() seems to default to same path.
Is there a proper way to account for this, the documentation is light in this regard.
yes you can do this.
Since you are using Durandal.router you can use a convention of where to find your ViewModels by overriding the routers autoConvertRouteToModuleId like so:
router.autoConvertRouteToModuleId = function(url, params) {
return url + '/' + 'params[0]';
};
As for finding the view that binds to your viewmodel then you can like you have above.. change the viewlocator convention.