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')

Answer 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.