vueRouter — 动态路由

>[success] # 动态路由 ~~~ 1.动态路由 我个人感觉是为了更好的适应'RESTful '这种路由风格，举个例 子，下面两个路由经过观察唯一不样的位置就是后面，如果我们按照某种规则 去匹配这种路由就可以使用动态路由：'/user/foo' 和 '/user/bar' 2.一个'路径参数'使用冒号 : 标记 ~~~ >[danger] ##### 官方给出一个动态参数表格 | 模式 | 匹配路径 | $route.params | | --- | --- | --- | | /user/:username | /user/evan | `{ username: 'evan' }` | | /user/:username/post/:post\_id | /user/evan/post/123 | `{ username: 'evan', post_id: '123' }` | >[danger] ##### 动态路由的使用 ~~~ ~~~ >[danger] ##### 注意点-- 动态参数变化组价不会被渲染 ~~~ 1.官方给出的解释:提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起 销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子 不会再被调用。 2.简单的说就是不会触发生命周期初始化时候从'beforeCreate'到'mounted'这个 区间的生命周期，而是认为是相同组件每次只会更新'beforeUpdated'和'updated' 3.一般情况下在一些初始化操作例如 接口请求的时候会在'beforeCreate'到'mounted'这个 区间的生命周期来请求接口，因为动态路由的缘故从 /user/foo 导航到 /user/bar 是不会在 触发这些生命周期相对的替代办法 3.1.使用'watch' 去监听重新触发 3.2.用'beforeRouteUpdate'导航守卫 ~~~ * watch ~~~ const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } ~~~ * beforeRouteUpdate ~~~ const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } } ~~~