如何使用路由器将 Vue 组件渲染到 Vue-js 中的另一个（新）页面？

Question

目前我的应用程序呈现在同一页面上，但我希望它呈现到新页面。我尝试使用render: h => h(App) 进行渲染，但它仍然呈现在同一页面上。

这是链接路由器的 Vue 文件 (Risks.vue)：

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

以下文件将我的路由器链接到组件（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

最后，这是定义 Vue 对象 (main.js) 的文件：

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

Answer 1

如果您的意思是，如何在新选项卡中打开链接，那么您可以在 <router-link> 上使用 target 属性

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

虽然显然您会丢失任何应用程序状态，因为它会加载您应用程序的新实例。