vue-router 如何解决这样的跳转。

Question

我有两篇文章a和ｂ，它们的链接分别是/post/a和post/b.
但由于都属于文章，使用的是同一个组件，只是组件里的内容根据url的不同而不同。router是这样的：

'/post/:post_id': {
  component: require('./components/post')
}

现在我在文章b里放置一个链接，点击链接访问文章a，这时会看到浏览器地址变了，但是页面并没有反应，必须再刷新一下页面（代码刷新也可）才能变成文章a。并且，在文章b和文章a之间的所有前进后退操作都无效，也是浏览器地址变了但是页面没变。
我自己感觉是，因为是相同组件，实际上并没有触发vue-router. 每篇文章都是解析markdown然后传入./components/post这个组件来显示的，如果每篇文章都单独写一个组件，应该能解决问题，但是这么做得话，我就得维护markdown, vue component, router map 三个位置的文章列表，这会导致增删文章变得相当麻烦。想问下各位在我目前的结构下，有没有办法能够正常在两篇文章间切换？
--------------更新-----------------
抱歉，应该附加一下./components/post的内容的，组件结构为：

<template lang="jade">
  div#markdown {{{ post }}}
</template>

<script>
  import hljs from 'highlight.js'
  import jq from 'jquery'

  export default {
    data () {
      return {
        post: require('../components/articles/' + this.$route.params.post_id + '.md')
      }
    },
    ready () { ... }
  }
</script>

载入时根据router.params.post_id的值，改变post的值。

Answer 1

我认为你是不是把数据的读取和解析代码放错位置了。

vue的created、data
vue-router的data、activated

这4个hook具体不知道哪一个比较合适，你都console.log看看吧。
附文档
http://router.vuejs.org/en/pipeline/hooks.html

-------------------------方便大家查看，评论如下

多谢你的提醒，我去查了一下钩子，发现有一个canReuse方法，禁止该组件重用就行了～
almon000 · 1 天前
回复 almon000：
你这是quick and dirty的做法，更完美的做法是reuse之后，在一个合适的hook上load一下数据。可以减少运算量、增加用户体验。
wusisu · 1 天前
回复 wusisu：
哦，我看到了，router 的 data 里面就专门举出了我这个例子，文档还是看的不够仔细啊。。。
almon000 · 1 天前

Answer 2

相同组件，被重用。没有触发vue-router。
<router-view :key="$route.path"></router-view>

Answer 3

楼主解决了吗 我也遇到一样的问题

Answer 4

这个数据放在computed里面啊，放在data里不行

Answer 5

https://github.com/vuejs/vue-...

Answer 6

@wusisu 赞同他说的。（声望不够，不能点赞,尴尬）

解决的思路呢，就是他说的这样。

不过具体操作的话，首先：vue-router的data、activated　这些都是vue-router 1.x的。

而vue-router 2.x　的解决方法是这个：
导航钩子函数

const Foo = {
  template: `...`,
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

（我的问题的解决方案就是在这里重新get一下服务端的数据。）