vueRouter -- 动态路由 · Vue&&TypeSprict--基础总结

>[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] ##### 动态路由的使用 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> // 动态路径参数以冒号开头 <router-link to="/sapp/123">sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{$route.params.id }} </div> </template> <script type="text/javascript"> const sapp = { template:'#sapp', }; const routes=[ {path:"/sapp/:id", component:sapp}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[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() } } ~~~