How should vue-router click a link to jump to a non-nested route?

under the current page, the large block below is a router-view

clipboard.png

:
clipboard.png

what I want to do is click on the details and jump to / audit/records/detail?id=.

there is still a subtitle of the record to be reviewed and audited, but the following section starts with "audited" and is a new

.

page, which contains audit details,

how should this be achieved? Or which page should the router-view be placed on? Do you want to control the display and hiding of different router-view?

attached router.js:

mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "index",
      component: index,
      // meta: { requiresAuth: true },
      redirect: "audit",
      children: [
        {
          path: "audit",
          component: audit,
          redirect: "audit/auditing",
          children: [
            {
              path: "auditing",
              component: auditing
            },
            {
              path: "records",
              component: records,
              children: [
                {
                  path: "auditDetail",
                  component: auditDetail
                }
              ]
            }
          ]
        },


tell me some of my thoughts

  • is similar to @ OBKoro1, using a new page to show details. The setting method is target= "_ blank" , but this is not consistent with the idea of single page application
  • .
  • add an audit detail to the column of the pending audit / audit record, set the route of auditDetail to be at the same level as records, and click on the details to switch to the corresponding page
  • use a modal box similar to that in bootstrap to display this detail. There is no need for routing to switch, and you can replace the content when you click
  • .

just add a target , jump how you want to jump, just give it a try.

    <router-link target="_blank">
    </router-link>
Menu