javascript - vue-router 如何解决这样的跳转。
伊谢尔伦
伊谢尔伦 2017-04-11 12:55:40
[JavaScript讨论组]

我有两篇文章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的内容的,组件结构为:



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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(4)
天蓬老师

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

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 天前

PHPz

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

伊谢尔伦

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

迷茫

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号