I have a ns-angular app that is structured as follows :
in the app.component I have a master page-router-outlet with 2 pages
Login
Main
Routing is configured in the following way :
const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', loadChildren: './views/login/start.module#StartModule' },
{ path: 'main', loadChildren: './views/main/main.module#MainModule' }
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
In the main component I have static action bar and a child router-outlet that navigates between these components.
Again routing is defined as :
const mainRoutes: Routes = [
{
path: '', component: MainComponent, children: [
{ path: '', redirectTo: 'main/explore', pathMatch: 'full' },
{ path: 'camera', loadChildren: './camera/camera.module#CameraModule' },
{ path: 'explore', loadChildren: './explore/explore.module#ExploreModule' }
]
}
];
export const MainRouting: ModuleWithProviders = RouterModule.forChild(mainRoutes);
What currently happens is that if I am in the - let's say- explore component ( /main/explore ), I navigate to the the camera component ( /main/camera ) and I press back on my android device, instead of going back to the explore component I go to the start module.
I read the documentation on angular navigation, but even with the following code
android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {
this.routerExtensions.back();
});
I am unable to return to the previous component.
How would I achieve that?
Try to overwrite the default Android behavior for the back pressed event as shown in this StackOverflow answer
Notice the data.cancel is set to true
application.android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {
data.cancel = true; // prevents default back button behavior
});
Related
I am creating a simple todo and i'm using redux toolkit.
My issue is that it seems not to work, there is no error. It just doesn't work.
TaskPane.tsx
dispatch(addTask(task));
TaskSlice.tsx
const taskSlice = createSlice({
name: 'tasks',
initialState,
reducers: {
addTask: (state, action: PayloadAction<string>) => {
console.log('Add task');
state.tasksItems = [
...state.tasksItems,
{
id: Date.now(),
title: action.payload,
status: 'todo',
},
];
},
justPrint: state => {
console.log('I am called.');
},
},
});
Nothing is being printed on console when i dispatch both actions.
I have another slice for modals and it works properly.
I'm having problems calling actions in the store when I configure the nuxt-socket.io in the project, I'm configuring the nuxt-socket.io in the nuxt.config.js and calling the connection in the component according to the nuxt-socket.io documentation ( https://nuxt-socket-io.netlify.app/usage ), but when this configuration is performed, the components can no longer call the actions of the store.
I'm using vuex and vuex-module-decorators.
Config nuxt.config.js:
io: {
sockets: [
{
name: 'home',
url: 'http://url-server-backend.com',
default: true,
}
]
},
Config component:
async beforeMount(){
const token = this.$cookies.get('authToken');
this.socket = this.$nuxtSocket({
name: 'home',
channel: '/socket-io',
persist: true,
teardown: true,
reconnection: false,
extraHeaders: {
Authorization: token
}
});
},
Error:
Image Error action
Please help me fix this problem. I create application using Laravel 8, Blade templates and Vue 3 components.
In that i have basic routing in Laravel. I want to add nice looking menu in admin panel https://github.com/yaminncco/vue-sidebar-menu.
Unfortunately, I don't know how to pass my menu structure to this component. When I use the example from the documentation I get an error
Failed to resolve component: router-link
I dont use router in Vue. I see in documentation example with Customize link with InertiaJa but i dont know how use it because i dont use and know InertiaJS.
My simple MainMenu.vue component code:
<template>
<SidebarMenu :menu="menu"></SidebarMenu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
name: "MainMenu",
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Charts',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Sub Link'
}
]
}
]
}
}
}
</script>
<style scoped>
</style>
Ok, I found a solution to the problem. Need to add own code which create\render simple link in html
in app.js add:
/*remaining application code*/
import { createApp, h } from "vue";
const customLink = {
name: 'CustomLink',
props: ['item'],
render() {
return h('a', this.$slots.default())
}
}
const app = createApp({});
app.component('custom-link', customLink)
/*remaining application code*/
and in Vue Component:
<SidebarMenu :menu="menu" :link-component-name="'custom-link'"></SidebarMenu>
I'm trying to create aplication using Vue.js and Spring boot. After switching to a different route using Vue routing my page reloads. I'm using this pice of code to forward to my client side route.
#Controller
class FrontController {
#GetMapping("/**/{path:[^\\.]*}")
fun redirect(#PathVariable path: String): String {
return "forward:/index.html"
}
}
index.js
const routes = [
{
path: '/sad',
name: 'AdminDashboard',
component: AdminDashboard
},
{
path: '/',
name: 'UserList',
component: UserList
},
{
path: '/role/all',
name: 'RoleList',
component: RoleList
},
{
path: '/course/all',
name: 'CourseList',
component: CourseList
},
{
path: '/category/all',
name: 'CategoryList',
component: CategoryList
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
Here is a gif to show my problem: https://imgur.com/zv0CIzv. So ye I'm trying to get rid off that flashing when switching on different pages. It works fine on Microsoft Edge, but not on Chrome and Firefox.
fun redirect(#PathVariable path: String, e:event): String {
e.preventDefault();
return "forward:/index.html"
}
I'm using Vue 2.6.12, Laravel and Inertia.
When using vue-meta to alter the meta title it displays 'undefined' for a split second when loading any page.
Im using Inertia, so the routing is on Laravels side and uses Inertia to pass the Vue component name and data to the frontend.
//app.js
new Vue({
metaInfo: {
titleTemplate: 'Inertia: %s'
},
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(el)
//Index.vue
export default {
metaInfo: {
title: 'User list'
}
}
It generally works, but it seems to stop working while Inertia requests are being processed / recieved / sent.
How do I prevent this?
what I understood that you want to load and manipulate metadata of the html page.
This cannot be manipulated unless you create a slot in the header, or place a prop so that each time you pass parameters to it it changes, with a layout.!
the most ideal thing would be that you use it inside the router:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: 'Home Page - Example App',
metaTags: [
{
name: 'description',
content: 'The home page of our example app.'
},
{
property: 'og:description',
content: 'The home page of our example app.'
}
]
}
}
i dont expert in english.! will it really help
enter link description here