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
    }