I have a child route path in my #NgModule defined as:
RouterModule.forRoot([
{
path: '',
redirectTo: 'orders',
pathMatch: 'full'
},
{
path: 'orders',
component: ListComponent,
children: [
{
path: 'view/:id',
component: ViewOrderComponent
},
]
}
]),
The problem i have is that when i load in the browser the page /orders loads fine, when i navigate to /orders/view/100 still works, but if i refresh the browser(with the url /orders/view/100) it loads but goes to /orders, it doesnt load /orders/view/100 as expected, i now is loading the page /orders/view/100 because i can see in the Chrome dev tools, but after loading it goes to /orders.
How can i make that after loading the route orders it also loads the route orders/view?
Okay try this. On your second path definition make it an absolute path, "/orders"
Related
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.
I understand there are a lot of discussions about lazy loading on site already. I am asking this question because I didn't find any applicable solution.
I am using routing with lazy loading in Angular 6.
This is what I am trying. In the parent module
{
path: 'holiday',
loadChildren: './holiday/holiday.module#HolidayModule'
}
In child module.
const routes: Routes = [
{path: '',component: HolidayBookingComponent},
{path: ':id', component: HolidayBookingComponent}
];
while navigating "localhost:4200/holiday", it redirects to HolidayBookingComponent correctly
but when I navigate to "localhost:4200/holiday/3" I get
GET http://localhost:4200/holiday/runtime.js net::ERR_ABORTED 404 (Not Found)
Try with
const routes: Routes = [
{path: '',
children :[
{path: '',component: HolidayBookingComponent,
{path: ':id', component: HolidayBookingComponent}
]
},
];
Hope that will help!
working here https://stackblitz.com/edit/angular-yuirrk
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
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.
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.