Vue路由传参及路由参数变化后而页面不刷新的解决 |
您所在的位置:网站首页 › vue路由变了页面不跳转 › Vue路由传参及路由参数变化后而页面不刷新的解决 |
--7.23更新-- 更完善及多样的解决方法
路由传参问题原文 路由参数变化但页面不变化问题原文
仍然是readhub仿站项目,各路由的切换采用了Vue-router,由于实际上各个路由界面的结构是完全相同的,只是各路由对应的API域名不同(如/topic与/news),即获取并填入的数据不同 因此在这里我就只准备了一个子组件(下图的topic.vue,名字还没改哈哈哈哈将就一下),通过v-for渲染出不同的路由入口 (App.vue)
渲染结果: (准备等整个页面搞定了再把正式名字填进去,这样很有仪式感哈哈哈哈(●'◡'●)) 当点击时调用routerChange()函数,手动(我感觉这个的确是手动的?)更改路由,注意是$route与$router区别 $router : 是路由操作对象,只写对象 $route : 路由信息对象,只读对象 路由的index.js文件要这样写: 上面那个是默认路由的设置,下面的name是瞎写的
到这里就解决了今天的第一个问题,随即而来的是下一个问题,即路由是跳转了,但是页面没有变化,除非刷新一下 下意识地想在routerChange()里加一行reload(),但是立刻觉得太没牌面了 查了一下原来这个问题还蛮多人遇到的,选了一个比较简易但是实测可以使用的解决方法 在组件的vue文件中加入这些代码 即监听$route的变化,如果发生改变则修改当前实例的数据(在这里是detail),然后我用的是这种方式来渲染页面 (暂时比较简陋的界面,路由模式也还没有改,所以有个丑丑的#)
接下来要解决的就是点击链接后进入新闻详情的问题了,我感觉这应该是个压轴题? 本来这些应该是昨天的进展,无奈EDG被RNG0:2太影响情绪了...
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |