vue路由及路由的生命周期(面试常问)

基础配置如下：

 

 

 

 

 

 

 

 

效果：

 

添加用户和用户列表：

 

 

 

 

效果：

 

使用名字进行跳转时，有点问题：

 

修改：

 

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

 

 

 

 

效果：

 

添加用户：

 

用户列表：

 

带参数路由：

 

 

 

 

 

 

监控路径的变化方式，使用watch，如下：

 

 

更正规的方法：

 

 

 

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

 

 

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

 

还组件中也使用之：

 

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

 

 

还可以在入口上加一个钩子，如下：

 

 

还有一个叫beforeResolve，如下：

 

还有一个钩子：

 

 

它里面并没有next()

 

 

总结路由的生命周期（背下来）： 

- 会触发离开的钩子    beforeRouteLeave

- 如果进入到新的页面    beforeEach

- beforeEnter    进到路由的配置中

- beforeRouteEnter    组件进入时的钩子

- 解析完成    beforeResolve

- afterEach    当前进入完毕

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

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