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

我有两篇文章a和b,它们的链接分别是/post/apost/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的值。

阅读 11.8k
评论
    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一下服务端的数据。)

      相似问题
      推荐文章