vue单页面动态路由开发的优点,和动态路由的坑

295 阅读1分钟

如图,左边是动态路由操作的页面,右边是编译的动态路由。中间则是页面跳转 image.png

我们根据动态路由接收的:idss。 含义params,页面携带参数接收。来控制页面内容展示

初次,点击About,正常渲染。

二次切换,可以看到,url地址是已经变更,正常来讲,params是携带成功。但是,页面内容却没改变 image.png

结论:单页面开发,优点,按需加载。

动态路由的坑,加载成功一次,路由就不会再次重新加载。导致页面无法更新

(这点在做后台管理尤为重要,但一般ui库会给出api解决这个问题)

人工解决办法: 监听,覆盖路由

image.png

或者用vue的生命周期

beforeRouteUpdate(to,from) {
  this.id = to.params.idss
}

也是可以的