javascript - Use VUE2.0 to achieve the following effect

Question

website link

I have been learning VUE by myself recently and want to use VUE to make something. Then I found an example of a personal website on the Internet. I wanted to implement the part of the website where I click on the article title to enter the article details. Is it possible to use vue-router?

Please give me your opinions, thank you!

Answer 1

If I were asked to do it, I would use router, because the details of different articles are generally consistent in style, so I usually write a detail component. For the problem of passing values, I usually pass the article id. I will have it. About three methods

• Splice the request parameters into the url, either as path or param

• Manage via bus

• Save to vuex for management

Answer 2

Use vue-router, you can add a click event, and then call this.$router.push method to jump the route, and you can also pass parameters.
Give me an example:

Article title click event:

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

Get parameters from article details page:

    // 获取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
    }