极简记账反思:总结点击标签跳转到其编辑页面

1.添加路由,并新增相对应的组件

在path里用:xx(名称)占位,动态路径参数,以冒号开头,可以获取页面的xx(比如这里可以获取id)

2.数据获取

进入某个路由后,如果需要从服务器获取数据。我们可以通过两种方式来实现:

  • 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
  • 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。

2.1 首先,通过$route.params.id获取id,然后去看这个id在不在现有的数据里(这里的id是在path里自定义的动态路径参数)

2.2 不在的话,就通过$router.replace('/404'),跳转到404页面,这里值得注意的是,为了防止用户不能回退,我们用replace而不是push。

$route 是用来获取路由信息的

$ router 是路由器本身,做一些跳转的操作

$route.params 可以拿到所有的参数

3.完成跳转

我们使用router-link组件来完成点击每一个标签完成跳转,to跳转到对应的id页面

1.4.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。