diff --git a/components/common/topic/main.vue b/components/common/topic/main.vue
index 739c16c..e0cf6d3 100644
--- a/components/common/topic/main.vue
+++ b/components/common/topic/main.vue
@@ -31,7 +31,7 @@
     methods: {
       handleSelectTopic(item) {
         this.$router.push({
-          path: '/topic/' + item
+          path: `/topic/${item}?page=1`
         });
       }
     }
diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue
index 51ab6b5..eb2af02 100644
--- a/components/layouts/pc/header.vue
+++ b/components/layouts/pc/header.vue
@@ -182,7 +182,7 @@ export default {
         switch (item) {
           case 'topic':
             _ts.$router.push({
-              path: '/topic/news'
+              path: '/topic/news?page=1'
             })
             break;
           case 'github':
diff --git a/pages/index.vue b/pages/index.vue
index 104252f..095b4cd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,31 +4,43 @@
   </div>
 </template>
 <script>
-  import ArticleList from '~/components/archive/list'
-  import {mapState} from 'vuex';
+import ArticleList from '~/components/archive/list'
+import {mapState} from 'vuex';
 
-  export default {
-    name: 'Index',
-    fetch() {
-      return this.$store.dispatch('article/fetchList', {page: 1})
-    },
-    components: {
-      ArticleList
-    },
-    computed: {
-      ...mapState({
-        articles: state => state.article.list.data
-      })
-    },
-    methods: {
-      currentChangeArticle(page) {
-        this.$store.dispatch('article/fetchList', {page: page})
-      }
-    },
-    mounted() {
-      this.$store.commit('setActiveMenu', 'index')
+export default {
+  name: 'Index',
+  fetch({store, query}) {
+    return Promise.all([
+      store.dispatch('article/fetchList', {page: query.page || 1})
+    ])
+  },
+  watch: {
+    '$route.query': function () {
+      this.$store.dispatch('article/fetchList', {page: this.$route.query.page || 1})
     }
+  },
+  components: {
+    ArticleList
+  },
+  computed: {
+    ...mapState({
+      articles: state => state.article.list.data
+    })
+  },
+  methods: {
+    currentChangeArticle(page) {
+      this.$router.push({
+        name: 'index',
+        query: {
+          page: page
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'index')
   }
+}
 </script>
 
 <style>
diff --git a/pages/portfolio/_portfolio_id.vue b/pages/portfolio/_portfolio_id.vue
index f031544..204b0a5 100644
--- a/pages/portfolio/_portfolio_id.vue
+++ b/pages/portfolio/_portfolio_id.vue
@@ -43,7 +43,8 @@
     validate({params, store}) {
       return params.portfolio_id && !isNaN(Number(params.portfolio_id))
     },
-    fetch({store, params, error}) {
+    fetch({store, params, query, error}) {
+      params.page = query.page || 1
       return Promise.all([
         store
           .dispatch('portfolio/fetchDetail', params)
@@ -51,6 +52,14 @@
         store.dispatch('portfolio/fetchArticleList', params)
       ])
     },
+    watch: {
+      '$route.query': function () {
+        this.$store.dispatch('portfolio/fetchArticleList', {
+          page: this.$route.query.page || 1,
+          portfolio_id: this.routePortfolioId
+        })
+      }
+    },
     computed: {
       ...mapState({
         portfolio: state => state.portfolio.detail.data,
@@ -134,7 +143,11 @@
         )
       },
       currentChangeArticle(page) {
-        this.$store.dispatch('portfolio/fetchArticleList', {page: page, portfolio_id: this.routePortfolioId})
+        this.$router.push(
+          {
+            path: `/portfolio/${this.routePortfolioId}?page=${page}`
+          }
+        )
       }
     },
     mounted() {
diff --git a/pages/topic/_topic_uri.vue b/pages/topic/_topic_uri.vue
index 5d5e687..95e224f 100644
--- a/pages/topic/_topic_uri.vue
+++ b/pages/topic/_topic_uri.vue
@@ -1,62 +1,77 @@
 <template>
   <div class="topic-archive-page">
     <topic-nav :currentTopic="defaultParams.topic_uri"></topic-nav>
-    <article-list :articles="articles" @currentChange="currentChangeArticle"/>
+    <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
   </div>
 </template>
 
 <script>
-  import ArticleList from '~/components/archive/list'
-  import {mapState} from 'vuex';
+import ArticleList from '~/components/archive/list'
+import {mapState} from 'vuex';
 
-  export default {
-    name: "topicArticleList",
-    components: {
-      ArticleList
-    },
-    validate({params, store}) {
-      if (params.topic_uri === 'news') {
+export default {
+  name: "topicArticleList",
+  components: {
+    ArticleList
+  },
+  validate({params, store}) {
+    if (params.topic_uri === 'news') {
+      return true;
+    }
+    return params.topic_uri && store.state.topic.data.some(
+      topic => topic.topicUri === params.topic_uri
+    )
+  },
+  fetch({store, params, query}) {
+    params.page = query.page || 1
+    return Promise.all([
+      store.dispatch('article/fetchList', params)
+    ])
+  },
+  watch: {
+    '$route.query': function () {
+      let _ts = this
+      _ts.$store.dispatch('article/fetchList', {
+        topic_uri: _ts.defaultParams.topic_uri,
+        page: _ts.defaultParams.page || 1
+      })
+    }
+  },
+  computed: {
+    ...mapState({
+      articles: state => state.article.list.data
+    }),
+    currentTopic() {
+      if (this.$route.params.topic_uri === 'news') {
         return true;
       }
-      return params.topic_uri && store.state.topic.data.some(
-        topic => topic.topicUri === params.topic_uri
+      return this.$store.state.topic.data.find(
+        topic => topic.topicUri === this.$route.params.topic_uri
       )
     },
-    fetch({store, params}) {
-      return store.dispatch('article/fetchList', params)
-    },
-    computed: {
-      ...mapState({
-        articles: state => state.article.list.data
-      }),
-      currentTopic() {
-        if (this.$route.params.topic_uri === 'news') {
-          return true;
-        }
-        return this.$store.state.topic.data.find(
-          topic => topic.topicUri === this.$route.params.topic_uri
-        )
-      },
-      defaultParams() {
-        return {
-          topic_uri: this.$route.params.topic_uri
-        }
-      }
-    },
-    methods: {
-      currentChangeArticle(page) {
-        this.$store.dispatch('article/fetchList', {page: page, topic_uri: this.defaultParams.topic_uri})
-      }
-    },
-    mounted() {
-      this.$store.commit('setActiveMenu', 'topic');
-    },
-    created() {
-      if (!this.currentTopic) {
-        this.$router.back()
+    defaultParams() {
+      return {
+        topic_uri: this.$route.params.topic_uri,
+        page: this.$route.query.page || 1
       }
     }
+  },
+  methods: {
+    currentChangeArticle(page) {
+      this.$router.push({
+        path: `/topic/${this.defaultParams.topic_uri}?page=${page}`
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'topic');
+  },
+  created() {
+    if (!this.currentTopic) {
+      this.$router.back()
+    }
   }
+}
 </script>
 
 <style scoped>
diff --git a/pages/user/_nickname.vue b/pages/user/_nickname.vue
index bc3a734..e9ca79a 100644
--- a/pages/user/_nickname.vue
+++ b/pages/user/_nickname.vue
@@ -12,11 +12,24 @@
           <h3 class="mb-3">{{ user.nickname }}</h3>
           <p class="mb-4" v-html="user.signature"></p>
           <div v-if="userExtend" style="margin-bottom: 1rem;">
-            <el-link v-if="userExtend.blog" class="user-link" title="博客" :underline="false" :href="userExtend.blog" target="_blank"><font-awesome-icon :icon="['fas', 'link']"></font-awesome-icon></el-link>
-            <el-link v-if="userExtend.github" class="user-link" title="github" :underline="false" :href="'https://github.com/' + userExtend.github" target="_blank"><font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon></el-link>
-            <el-link v-if="userExtend.weibo" class="user-link" title="微博" :underline="false" :href="'https://weibo.com/n/' + userExtend.weibo" target="_blank"><font-awesome-icon :icon="['fab', 'weibo']"></font-awesome-icon></el-link>
-            <el-link v-if="userExtend.weixin" class="user-link" title="微信" :underline="false" :href="userExtend.weixin"><font-awesome-icon :icon="['fab', 'weixin']" target="_blank"></font-awesome-icon></el-link>
-            <el-link v-if="userExtend.qq" class="user-link" title="QQ" :underline="false" :href="userExtend.qq"><font-awesome-icon :icon="['fab', 'qq']" target="_blank"></font-awesome-icon></el-link>
+            <el-link v-if="userExtend.blog" class="user-link" title="博客" :underline="false" :href="userExtend.blog"
+                     target="_blank">
+              <font-awesome-icon :icon="['fas', 'link']"></font-awesome-icon>
+            </el-link>
+            <el-link v-if="userExtend.github" class="user-link" title="github" :underline="false"
+                     :href="'https://github.com/' + userExtend.github" target="_blank">
+              <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
+            </el-link>
+            <el-link v-if="userExtend.weibo" class="user-link" title="微博" :underline="false"
+                     :href="'https://weibo.com/n/' + userExtend.weibo" target="_blank">
+              <font-awesome-icon :icon="['fab', 'weibo']"></font-awesome-icon>
+            </el-link>
+            <el-link v-if="userExtend.weixin" class="user-link" title="微信" :underline="false" :href="userExtend.weixin">
+              <font-awesome-icon :icon="['fab', 'weixin']" target="_blank"></font-awesome-icon>
+            </el-link>
+            <el-link v-if="userExtend.qq" class="user-link" title="QQ" :underline="false" :href="userExtend.qq">
+              <font-awesome-icon :icon="['fab', 'qq']" target="_blank"></font-awesome-icon>
+            </el-link>
           </div>
           <div v-if="oauth">
             <div v-if="oauth.idUser !== user.idUser">
@@ -72,7 +85,8 @@ export default {
   validate({params, store}) {
     return params.nickname
   },
-  fetch({store, params, error}) {
+  fetch({store, params, query, error}) {
+    params.page = query.page || 1
     return Promise.all([
       store
         .dispatch('user/fetchDetail', params)
@@ -84,6 +98,38 @@ export default {
       store.dispatch('user/fetchFollowingList', params)
     ])
   },
+  watch: {
+    '$route.query': function () {
+      let _ts = this;
+      _ts.$set(_ts, 'activeTab', _ts.$route.query.tab)
+      switch (_ts.activeTab) {
+        case "0":
+          _ts.$store.dispatch('user/fetchArticleList', {
+            nickname: this.$route.params.nickname,
+            page: this.$route.query.page || 1
+          })
+          break;
+        case "1":
+          _ts.$store.dispatch('user/fetchPortfolioList', {
+            nickname: this.$route.params.nickname,
+            page: this.$route.query.page || 1
+          })
+          break;
+        case "2":
+          _ts.$store.dispatch('user/fetchFollowerList', {
+            nickname: this.$route.params.nickname,
+            page: this.$route.query.page || 1
+          })
+          break;
+        default:
+          _ts.$store.dispatch('user/fetchFollowingList', {
+            nickname: this.$route.params.nickname,
+            page: this.$route.query.page || 1
+          })
+          break
+      }
+    }
+  },
   computed: {
     ...mapState({
       user: state => state.user.data,
@@ -103,19 +149,25 @@ export default {
   },
   methods: {
     currentChangeArticle(page) {
-      this.$store.dispatch('user/fetchArticleList', {page: page, nickname: this.$route.params.nickname})
+      this.onRouter(0, page)
     },
     currentChangePortfolio(page) {
-      this.$store.dispatch('user/fetchPortfolioList', {page: page, nickname: this.$route.params.nickname})
+      this.onRouter(1, page)
     },
     currentChangeFollowing(page) {
-      this.$store.dispatch('user/fetchFollowingList', {page: page, nickname: this.$route.params.nickname})
+      this.onRouter(2, page)
     },
     currentChangeFollower(page) {
-      this.$store.dispatch('user/fetchFollowerList', {page: page, nickname: this.$route.params.nickname})
+      this.onRouter(3, page)
     },
     handleToggleTab(key) {
-      this.$set(this, 'activeTab', key);
+      this.onRouter(key, 1)
+    },
+    onRouter(key, page) {
+      this.$router.push({
+        path: `/user/${this.$route.params.nickname}?tab=${key}&page=${page}`
+      })
+
     },
     gotoChats() {
       let _ts = this;