sync profile tab state with location query

src/components/user_profile/user_profile.js

@@ -22,16 +22,20 @@ const FriendList = withLoadMore({
   additionalPropNames: ['userId']
 })(List)
 
+const defaultTabKey = 'statuses'
+
 const UserProfile = {
   data () {
     return {
       error: false,
-      userId: null
+      userId: null,
+      tab: defaultTabKey
     }
   },
   created () {
     const routeParams = this.$route.params
     this.load(routeParams.name || routeParams.id)
+    this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   destroyed () {
     this.stopFetching()
@@ -115,6 +119,10 @@ const UserProfile = {
     switchUser (userNameOrId) {
       this.stopFetching()
       this.load(userNameOrId)
+    },
+    onTabSwitch (tab) {
+      this.tab = tab
+      this.$router.replace({ query: { tab } })
     }
   },
   watch: {
@@ -128,8 +136,8 @@ const UserProfile = {
         this.switchUser(newVal)
       }
     },
-    $route () {
+    '$route.query': function (newVal) {
-      this.$refs.tabSwitcher.activateTab(0)()
+      this.tab = newVal.tab || defaultTabKey
     }
   },
   components: {

src/components/user_profile/user_profile.vue

@@ -12,11 +12,13 @@
         rounded="top"
       />
       <tab-switcher
-        ref="tabSwitcher"
+        :active-tab="tab"
         :render-only-focused="true"
+        :on-switch="onTabSwitch"
       >
-        <div :label="$t('user_card.statuses')">
         <Timeline
+          key="statuses"
+          :label="$t('user_card.statuses')"
           :count="user.statuses_count"
           :embedded="true"
           :title="$t('user_profile.timeline_title')"
@@ -25,9 +27,9 @@
           :user-id="userId"
           :pinned-status-ids="user.pinnedStatusIds"
         />
-        </div>
         <div
           v-if="followsTabVisible"
+          key="followees"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
@@ -42,6 +44,7 @@
         </div>
         <div
           v-if="followersTabVisible"
+          key="followers"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
@@ -58,6 +61,7 @@
           </FollowerList>
         </div>
         <Timeline
+          key="media"
           :label="$t('user_card.media')"
           :disabled="!media.visibleStatuses.length"
           :embedded="true"
@@ -68,6 +72,7 @@
         />
         <Timeline
           v-if="isUs"
+          key="favorites"
           :label="$t('user_card.favorites')"
           :disabled="!favorites.visibleStatuses.length"
           :embedded="true"