Vue 2: Using router-link, but button stays on page?

Question

I'm pretty new to Vue 2 and I'm struggling with my router-link. So, in my parent component, I have a button to create a post that when a user clicks on it, they are redirected to a Create Post form. However upon redirecting, the button is still visible in the Create Post form. How can I fix this or can anyone point me to the right direction?

App.vue

<template>
 <div>
     <router-link to="/post/create" exact>
      <button type="button">Create Post</button>
     // this button is visible in my CreatePost component when I need it to not be
     </router-link>
     <router-view/>
    </div>
</template>

routes/index.js

(...)
Vue.use(Router)
export default new Router ({
  routes:[
    {
      path: '/post/create',
      name: 'CreatePost',
      component: CreatePost // this component is imported 
    }  

  ]

})

Answer 1

As mentioned in the documentation-

router-view will display the component that corresponds to the URL. You can put it anywhere to adapt it to your layout.

As per the above definition, your button is in the same file where your router-view is. That means every route's component will render where <router-view> is and so does would have the button at the top.

So, a solution would be-

1. Create a home route that will render a Home.vue component and put your <router-link> there.
2. In App.vue, leave only router-view.