ui:outputUrl - How to pass more then one parameter from Lightning component to VF page through ui:outputURL value

Question

I am facing some error when I am trying to use ui:outputURL component in lightning component.
Here is the code I am trying to execute:

<td data-label="Name" class="slds-text-align--left">
  <div class="slds-truncate">
     <ui:outputURL value="{!'/apex/Visualforce_Page?button=Approve&id='+p.Id}"                      
                   label="{!p.Name}" target="_new"/> 
  </div>
</td>

I am getting the below error when I am trying save my lightning component.
the reference to entity id must end with the ' ;' delimiter.:Source in lightning component ui:outputURL

Please help me out, how can I pass two parameters through URl from ui:outputUrl in lightning component while calling VF page.

I really appreciate your help. Thank You.

Answer 1

In Lightning, which is XML-based, there's a set of characters known as character entities, which are in the form &<name>;. So, to encode a literal &, you need to use its entity name, &.

 <ui:outputURL value="{!'/apex/Visualforce_Page?button=Approve&amp;id='+p.Id}"                      
               label="{!p.Name}" target="_new"/>