Vue router-link路由不同的写法,不一样的效果

做~自己de王妃 提交于 2019-12-05 04:00:31

我想要的路径:http://localhost:8080/#/main/hato/realtime/eventDetail/238

情况一:未进行路由配置:
 {
     path: 'eventDetail',
     name: 'eventDetail',
     component: () => import('@/views/security/alarm-management/eventDetail')
}

情况二:已进行路由配置

 {
     path: 'eventDetail/:id',
     name: 'eventDetail',
     component: () => import('@/views/security/alarm-management/eventDetail')
}
在情况一下:

路由用 name和params 
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail 

路由用path和query
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail?id=238

const showButton = {

  props: ["scope"],
  render: function(h) {
    return (
      <div>
        <router-link to={{name: "eventDetail", params: {id: this.scope.row.id}}}>
          查看详情
        </router-link>
      </div>
    );
  }
};
在情况二下:

路由用 name和params 
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail/238

路由用path和query 下面这个路径很奇怪,所以vue在router.js里面有个name属性
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail/:id?id=238

const showButton = {
  props: ["scope"],
  render: function(h) {
    return (
      <div>
        <router-link to={{path: "eventDetail/:id", query: {id: this.scope.row.id}}}>
          查看详情
        </router-link>
      </div>
    );
  }
};
总结:query要用path来引入,params要用name来引入
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!