Valine在使用Vue构建的单页面应用下无法正常显示

[YouXam]

Valine在使用Vue构建的单页面应用下无法正常显示

如果先进入主页,再点击router-link标签进入文章页面,无法显示,必须手动刷新

但如果通过文章页面链接直接进入则可以显示

首页跳转部分:

<router-link :to="'/article/'+article.id">{{ article.title }}</router-link>

文章页面部分:

<template>
    <div>
        <!--其他代码-->
        <div id="vcomments"></div>
    </div>
</template>
<script>
import Valine from 'valine'
export default {
    name: 'Article',
    //其他代码
    created () {
        //其他代码
        /* eslint-disable no-new */
        new Valine({
            el: '#vcomments',
            appId: '*****',
            appKey: '*****',
            path: this.$route.path
        })
    }
}
</script>

请问是否有办法解决

[xCss]

请尝试修改为下面的初始化方式试试：

<script>
import Valine from 'valine'
export default {
  name: 'Article',
  data(){
    return {
      valine:null
    }
  },
  mounted() {
    let vm = this
    vm.$nextTick(()=>{
      vm.valine = new Valine({
        el: '#vcomments',
        appId: '*****',
        appKey: '*****',
        path: vm.$route.path
      })
    })
  },
  watch: {
    $route (to, from) {
      if (from.path != to.path) {
        this.valine && this.valine.setPath(to.path)
      }
    }
  }
}
</script>

[YouXam]

这样就可以显示了,谢谢

[Mister-Hope]

Not working, setPath is not defined.