vue-router 点击链接跳到非嵌套的路由中 应该怎么实现?

呼哈
  • 217

在当前这个页面下, 下面那一大块是一个router-view

clipboard.png

浏览器中的地址栏是:
clipboard.png

我希望做到的是点击详情 然后跳转到/audit/records/detail?id=...

上面依然有 待审核 和 审核记录的 小标题 但是下面的部分从"已审核"开始 是一个新的

页面,里面是审核详情,

这个应该怎么实现?或者说这个router-view应该放在哪个页面中?是不是还要控制不同router-view的显示隐藏?

附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
                }
              ]
            }
          ]
        },

回复
阅读 1.7k
2 个回答

说一下我的几种想法吧

  • 和@OBKoro1类似,用一个新的页面来展示详情,设置方法就是target="_blank",只是这样就与单页面应用这个理念不相符了
  • 在待审核/审核记录那一栏增加一个审核详情, 把auditDetail的路由设置为与records同级,点击详情的时候切换到对应的页面就行了
  • 用类似bootstrap里面的模态框来显示这个详情,不用路由来切换,点击的时候替换内容就可以了

就加一个target,该怎么跳转就怎么跳转,试一下就知道了。

    <router-link target="_blank">
    </router-link>
宣传栏