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() } } ~~~