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