javascript - 使用VUE2.0實現下面的效果

Question

網頁網址

最近在自學VUE，想用VUE做點東西。然後就在網路上找了一個個人網站的例子，我就是我想實現網站中點擊文章標題進入文章詳情這一部分該怎麼實現。是否可以用vue-router。

請各位給點意見，謝謝！

Answer 1

讓我做的話我會用router,因為不同的文章的詳情一般都是風格一致的，所以一般會寫一個詳情的組件，那麼對於傳值的問題，一般是傳遞文章id吧，我本人會有大概三種方法

• 將請求參數拼接到url上，當作路徑或param都可以

• 透過bus來管理

• 存放到vuex進行管理

Answer 2

用vue-router吧，你可以加個點擊事件，然後呼叫this.$router.push方法進行路由跳轉，同時還可以傳參。
舉個栗子：

文章標題點擊事件：

//name是路由的名字也可以用path，query中是参数，放在url中
this.$router.push({name: 'MemberMenu', query: {id: 233, title: 'hello'}})
//url: xxx.com/MemberMenu?id=233&title=hello

文章詳情頁取得參數：

    // 获取url参数
    getUrl (name) {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      let r = window.location.search.substr(1).match(reg)
      if (r !== null) {
        // 解决乱码问题
        return decodeURIComponent(decodeURI(r[2]))
      }
      return null
    }