Vue/vuetify, how to add router link to tab

Question

I would like to use the vuetify tab component simply as a navigation control, to

Answer 1

EDIT 2018/11/15
Added new example: codepen

  
    {{tab.text}}
  


data: () => ({
  activeTab: "",
  tabs: [
    { name: "UserProfile", text: "Profile" }, 
    { name: "UserActivity", text: "Activity" },
    { name: "UserSettings", text: "Settings" },
  ],
}),

---

Note:
this answer worked for older vuetify version.
Tabs syntax has changed since then, and now in v1 looks like:

    Tab 1
    Tab 2
    Tab 1 content
    Tab 2 content

Answer still applies, but on v-tab element, instead of v-tabs-item
e.g.

---

Answer:

Use either:

Or

Notice path vs name

You can use name if you are using named route

AFAIK you can't pass props if you are not using named route, thus you must name it and then

:to="{name: 'RouteName', params: {id: $route.params['id'] }}"

Also notice that params must be inside params object