基础配置如下:

 

 

 

 

 

 

 

 

效果:

 

添加用户和用户列表:

 

 

 

 

效果:

 

使用名字进行跳转时,有点问题:

 

修改:

 

一个路由可以对应两个组件,也就是多视图:

 

 

 

 

效果:

 

添加用户:

 

用户列表:

 

带参数路由:

 

 

 

 

 

 

监控路径的变化方式,使用watch,如下:

 

 

更正规的方法:

 

 

 

除了使用?参数的方法,还可以使用/的方式,如下:

 

 

除了在组件里使用路由钩子,还可以在配置中使用,如下:

 

还组件中也使用之:

 

结论先走路由配置中的钩子,再走组件中的钩子。

 

 

还可以在入口上加一个钩子,如下:

 

 

还有一个叫beforeResolve,如下:

 

还有一个钩子:

 

 

它里面并没有next()

 

 

总结路由的生命周期(背下来): 

- 会触发离开的钩子    beforeRouteLeave

- 如果进入到新的页面    beforeEach

- beforeEnter    进到路由的配置中

- beforeRouteEnter    组件进入时的钩子

- 解析完成    beforeResolve

- afterEach    当前进入完毕

- 当属性变化时 并没有重新加载组件 会触发beforeRouteUpdate方法

- 组件渲染完成后 会调用当前beforeRouteEnter回调方法

Logo

前往低代码交流专区

更多推荐