How to render the Vue component to a another (new) page in Vue-js using router?

Question

Currently my App renders on the same page, but I want it to render to a new page. I tried rendering by using render: h => h(App), but it still renders on the same page.

Here's the Vue file from where the router will be linked (Risks.vue):

<router-link to="/risk-info">
<td>{{item.Model}}</td>
<td>{{item.Vulnerability}}</td>
<td>{{item.Unresolved}}</td>
</router-link>
<router-view/>

The below file links my router to the Component (index.js):

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/risk-info',
    name: 'RiskInfo',
    component: () => import('../components/breakdown/risks/VulnerabilityDetails.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

And lastly, this is the file that defines the Vue object (main.js):

new Vue({
  router,
  render: h => h(App),
  store,
}).$mount('#app')

Please can you be more specific with what you want to achieve? What have you tried and what didn't work? — Simon
– Simon, Commented Jun 2, 2020 at 8:27

Nilson Jacques · Accepted Answer · 2020-06-02 08:57:58Z

1

If you mean, how can you open the link in a new tab, then you can use the target attribute on a <router-link>

<router-link to="/risk-info" target="_blank">...</router-link>

Although obviously you'll lose any application state, as it'll load a new instance of your app.

answered Jun 2, 2020 at 8:57

Nilson Jacques

4683 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Somya Anchalia Over a year ago

Is it possible that Component could open on the same tab but as a new page?

Nilson Jacques Over a year ago

I don't understand what you mean by that. You want the page address to change along with the page content? Isn't that what happens with your current code?

Somya Anchalia Over a year ago

What happens right now is it shows up along with the other elements on the same page, what I want is that it opens as if its a new page where previous page components dont exist.

Nilson Jacques Over a year ago

Sounds like you might have put your 'home' page content actually in the page that contains the <router-view> component? If you put it in it's own page component, and add a default route, it should be swapped out when the URL changes.

Somya Anchalia Over a year ago

Yeah @NilsonJacques , you’re absolutely correct! It would be really nice of you, if you could upvote my question too. Thanks 👍

Collectives™ on Stack Overflow

How to render the Vue component to a another (new) page in Vue-js using router?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related