title: vuejs table router-link tag a
body: <p>I want to add a router link to my table, everything is ok until here, but there is a situation like this. I want it to be displayed as a href.
  Table gets corrupted when I do router tag=&quot;a&quot;
  When I set the router tag=&quot;tr&quot;, there is no problem, but the user may want to open that page by right-clicking the mouse and open a new window. so I would be happy if you could explain as an example how I can proceed. Thank you from now.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const app = new Vue({
      el: '#app',
      data: {
          userList: [
              {
                  id: 1,
                  name: "Prem",
                  age: 18,
                  status: "close",
                  gender: "male",
              },
              {
                  id: 2,
                  name: "Chandu",
                  status: "close",
                  age: 20,
                  gender: "female",
              },
              {
                  id: 3,
                  name: "Shravya",
                  status: "open",
                  age: 35,
                  gender: "female",
              },
              {
                  id: 4,
                  name: "Shravya",
                  status: "blocked",
                  age: 35,
                  gender: "female",
              }
          ]
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
  }
  
  td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }
  
  tr:nth-child(even) {
      background-color: #dddddd;
  }
  
  .dropdown-submenu {
      position: relative;
  }
  
  .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
  &lt;table&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;router-link
          tag="tr"
          v-for="(user, i) in userList" :key="i"
          :to="{ name: 'UserDetail', params: { id:user.id }}"
          &gt;
              &lt;td&gt;{{ user.name }}&lt;/td&gt;
              &lt;td&gt;{{ user.age }}&lt;/td&gt;
              &lt;td&gt;{{ user.status }}&lt;/td&gt;
              &lt;td&gt;{{ user.gender }}&lt;/td&gt;
      &lt;/router-link&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>