Dynamic route generation in NextJS 12 - javascript

I have a JS object like so
[
{
name: 'About',
path: '/about'
},
{
name: 'Profile',
path: '/profile'
},
{
name: 'Users',
path: '/users'
}
]
Is there any way for me to link the paths in this object to the pages I have in my pages folder
I tried using the Link component and passing it as prop. This handles the navigation but when the page is refreshed it redirects to the 404 page

Go into your next.config.js file and add this:
module.exports = {
trailingSlash: true,
}
That should fix this issue of 404 when refreshing. As for passing a prop to Link component, that's fine as it is.
Here's a next.js explanation as reference.

Related

Nuxt Dynamic routes returns 404 after static generation

guys. I have a shop page with two params: page and sort. like below:
example.com/shop/
example.com/shop/page/2/
example.com/shop/sort/newest/
example.com/shop/sort/oldest/page/2/
this is my route configs:
router: {
extendRoutes(routes, resolve) {
routes.push(
{
path: '/shop/sort/:sort/page/:page(\\d+)',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-sort-page',
},
{
path: '/shop/sort/:sort',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-sort',
},
{
path: '/shop/page/:page(\\d+)',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-page',
},
)
}
},
Now, after i generate my website, Nuxt doesn't generate sort pages. when i go to /sort/ or /sort/oldest/page/2/ it returns 404.
what do I need to do?
if I need to generate all these pages by myself, then what are these routes.push() used for?
I also want to add "name" and "filter" params. you see generating a dynamic route for all these parameters is impossible. what can I do?
thanks.
Im using Nuxt 2, by official doc, you need to add route for each parameter https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#routes
For workaround solution, I may create a redirect page for dynamic page and url is
example.com/shop/redirect?page=2&sort=newest
In redirect page:
mounted(){
const p_page= this.$route.query.page
const p_sort = this.$route.query.sort
this.$router.push(`/shop/sort/${p_sort}/page/${p_page}`)
}

How to structure router.js file in VueJs?

I want to structure my router.js file as currently there is around 500 lines of code in it.
{
path: "/",
component: () => import("./../src/views/dashboard/Dashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
{
path: "/regionWiseDashboard",
component: () => import("./../src/views/dashboard/RegionWiseDashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
The above code is repeating for every component I include in my project which just makes the code look more and more unreadable. Can I structure it anyhow? Maybe put all files in an JSON or divide the main js file into children js files?
How I structured my routes in vue.
First: create a folder named routes, inside this folder, create subfolders depends on how you group your routes. Example, villages, dashboard, user
Second: create a main route inside your routes folder. This main route will hold and import all your routes made in villages, dashboard, user.
last: import this main route to your main app.js

VueJS Routing/Navigation issues

Having trouble using VueJS (first time using it)
I have 90% of my page template in the index.html file in doc root
I have 3 components (each contains the main content body for each 'page')
My router:
export default new Router({
mode: 'history',
hash: false,
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/gallery',
name: 'Gallery',
component: Gallery
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
})
I can't get <router-link :to="{ name: 'Gallery' }">Gallery</router-link> to work - my site doesn't render them as anchor tags in my index.html (I'm probably not understanding how/where Vue can be used there) - so I'm using a standard link e.g. <a class="nav-link" href="/gallery">Gallery</a>
The problem:
While all of this code works fine on my local machine, it doesn't work anywhere that I upload my code to (I would like to have it working on Netlify). Netlify and other sites overwrite my attempts to remove the hash, so my links then link to e.g.
https://examplesite.com/#/ => https://examplesite.com/gallery#/
hash is not a Router option. Try removing this.
To use history mode on Netlify, you have to add a _redirects file to your public directory.
Add this to the file:
/* / 200
This will make sure that all paths are handled by the vue-router

List of files instead of a rendered page when using electron-vue (vue.js with electron)

i am very new to vue.js and electron. I am trying to render a page with some javascript.
So i have these .vue files or components. these can contain only one script tag as far as i know. So whenever i add anything to the script. the application breaks and shows me a directory which shows me files
this is how the application apears if i don't modify the script in dashboard.vue
this is how it apears if i change anything in the script of dashboard.vue
The dashboard does not contain any script for now. But when i add a script tag this problem occurs.
my dashboard script is
<script>
export default {
name : 'Dashboard',
data(){
return {
msg : "Welcome"
}
}
}
</script>
This is how the router is configured . It works fine if i don't have a script tag in dashboard.vue
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Dashboard',
component: require('#/components/Dashboard').default
},
{
path: '/Products',
name: 'Products',
component: require('#/components/Products').default
},
{
path: '*',
redirect: '/'
}
]
})
I want to know why this error occurs. and i need to run some script when dashboard is loaded from vue router. I have tried looking up this issue. i can't find anything. I am not that familiar with webpack and vue-loader either. Though i have went through the documentation.

Routing in angular 2

I have doubt in routing in angular2.
I have a login screen. After login dashboard and other pages had header and footer which will not be in login.
const routes: Routes = [
{
path:'',
redirectTo: '/login',
pathMatch: 'full'
},
{
path:'login',
loadChildren: './auth/auth.module#AuthModule',
},
{
path: 'dash',
loadChildren: './dash/dash.module#DashModule',
canActivate:[AuthGuard],
data: {
preload: true
}
},
{
path: 'project',
loadChildren: './project/project.module#projectModule',
canActivate: [AuthGuard],
data: {
preload: true
}
}
];
So its loading to the router-outlet in the app.component.html.
Currently I have to use the header component in all module html, like in dash.component.html
<ks-header></ks-header>
<router-outlet></router-outlet>
This router-outlet is a child outlet on which other dash related load.
Same like for other modules.
Is there any other effective way to show common header/sidebar?
I tried it in app.component.html like
<ks-header [userInfo] ="userInfo" [hidden]="isLogin"></ks-header>
<ks-sidebar [hidden]="isLogin"></ks-sidebar>
the islogin will determine logined or not. But I don't think it's a good idea.
You should use nested routes.
One for the base, as routeing between the template page and the login page.
The second and the nested one must be accomplished routeing between templated pages like
HOME, ABOUT, CONTACT ...
You can learn more about nested routes from here. So simple explanation.
And there is another question similar to yours. Namek's answer seems useful.

Categories