javascript - Verwenden Sie VUE2.0, um den folgenden Effekt zu erzielen

Question

Webadresse

Ich habe kürzlich selbst VUE gelernt und möchte VUE nutzen, um etwas zu machen. Dann habe ich im Internet ein Beispiel für eine persönliche Website gefunden. Ich wollte den Teil der Website implementieren, in dem ich auf den Artikeltitel klicke, um die Artikeldetails einzugeben. Ist es möglich, Vue-Router zu verwenden?

Bitte sagen Sie mir Ihre Meinung, danke!

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
    }