Avoid Page Refresh in Vuejs Navigation

I have a profile page and in the profile page i have the profile pictures and details of the user but also i have navigation which leads to each pages where users can edit email and password.

i did

<router-link :to="{name: 'settings'}">Edit Email</router-link>
Which is to the email update page

and

<router-link :to="{name: 'password'}">Edit Password</router-link>
which is to password update page

Anytime i move between this pages the profile image flicker and some information. How can i avoid this?

prasadchinwal5

6 years ago

Level 35

@monstajamss I believe if you separate your image from the router-view you should achieve what you are looking for?

Before that, is your image replicated in these 2 components?

monstajamss

6 years ago

Level 4

@prasadchinwal5 i did this

{
    path: '/settings',
    name: 'settings',
    component: Settings,
    beforeEnter: (to, from, next) =>{
      if (!store.getters['auth/authenticated']) {
        return next({
          name: 'home'
        })
      }

      next()
    },
    children: [
      {
        path: 'password',
        name: 'password',
        component:  UpdatePassword
      },
      {
        path: 'basic',
        name:'basic',
        component: UpdateBasic
      }

But the pages are not changing to respective link.

This is how it looks in url localhost:8080/setttings/basic then localhost:8080/settings/password but it is not showing the contents in the password

ignisrzeus

6 years ago

Level 1

HI!! I'm not sure if you've figured out how to do this, but I believe you do not have a nested router view in your VueJs Application. You have your first router view to handle all components in the page that you do not want to be refreshed every movement (This could be your sidebar, adminbar, footer, etc.) Then inside that router view, you have another router view. This "child" router view will be the only affected by the changes during navigation.

Let me know if you still haven't figured this one out. Thanks

Please or to participate in this conversation.