VueRouter--$router 獲取函數 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # $router -- 路由函數使用 ~~~ 1.先簡化來看'Vue Router'的使用 1.1.需要先聲明'Vue Router'實例在聲明時候傳入對應Router 構建選項作為參數關于構建項具體參考'https://router.vuejs.org/zh/api/#routes' 1.2.并且把當前'Router' 實例掛載到vue上簡單的代碼說明上述步驟： const router = new VueRouter({ routes:[{}...] }) const vm = new Vue({ // 注冊 router 對象 // 注入 $route $router route包含當前route對象的數據 // router包含router方法以及路由一些信息 router, render: h => h(App) }).$mount('#app') 2.配置后，在去打印'Vue'實例如圖可以發現此時，實例上掛載了一個$router 屬性，并且它是一個'VueRouter'的實例對象 3.關于'VueRouter'實例的路由對象內部會有關于路由相關的方法，其中'currentRoute'為當前路由對應的路由信息對象也就是下一章節要說的'$route' 4.'$router'中包含路由函數的方法例如: 'go' ' back' ' forward' ' push' ' replace'等控制路由跳轉一類的方法，當我們想使用這些方法的時候首先想到'$router' 5.總結: 當想控制路由時候可以通過'VueRouter' 實例提供的方法進行操作,并且這個實例已經被掛在到了Vue 實例上，我們可以通過掛在實例上的'$router'來調用是等同的 ~~~ * 這個圖是一個組件對象中所包含的屬性可以看到$router ![](https://box.kancloud.cn/9945203ad7de4997dd0ea46572977fd8_631x453.png) >[danger] ##### 關于聲明式和編程式 ~~~ 1.如果說Vue單頁面應用中的路由跳轉是通過'VueRouter'上的方法實現的，那么'<router-link :to="...">'是如何跳轉？ '解答':在官方文檔中有解釋道'<router-link :to="..."> 聲明式寫法'，'router.push(...)編程式寫法'，點擊 <router-link :to="..."> 等同于調用 router.push(...) ~~~ >[info] ## push -- 連接跳轉 ~~~ 1.this.$router.push('參數是路由地址')-- 跳轉指定頁 2.注意push 是在 history 棧添加一個新的記錄，因此當使用后退功能的時候可以后退到上一個網址 3.注意push路徑參數都不帶斜杠 4.當你點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同于調用 router.push(...)。 ~~~ >[danger] ##### 案例 -- 官方文檔案例 ~~~ // 字符串，/home router.push('home') // 對象 ,/home router.push({ path: 'home' }) // 命名的路由（動態路由使用這種方式)-> /user/123 router.push({ name: 'user', params: { userId: '123' }}) // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) ~~~ * 根據官方這四種方法，生成代碼如下: ~~~ <!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">sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> <button @click="handelClick('1')"> 直接使用地址 </button> <button @click="handelClick('2')"> 使用對象 </button> <button @click="handelClick('4')"> 傳遞參數 </button> </div> </template> <script type="text/javascript"> const sapp = { template:'#sapp', methods:{ handelClick(param){ const userId = '123' if(param === "1"){ this.$router.push('home'); }else if(param === "2"){ this.$router.push({path:'home'}); }else{ this.$router.push({ path: 'home', query: { plan: 'private' }}) } }, } }; const home = { template:'<h1>home</h1>' }; const routes=[ {path:"/sapp", component:sapp}, {path:"/home", component:home,name:'home'}, ]; const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[danger] ##### 官方給的注意事項 ~~~ 1.如果提供了 path，params 會被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數的 path： const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 這里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user ~~~ >[info] ## replace -- 替換 ~~~ 1.跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣替換掉當前的 history 記錄。簡單的說就是歷史記錄后退不是上一個而是前一個，因為他把上一個給替換成自己了 ~~~ >[info] ## back 和 go ，forward ~~~ 1.具體使用和上面的案例是一樣的只不過將'push'方法替換成了'go' 和'and' 2.官方給的go 說明,官方案例中雖然使用的router調用但是還是推薦'this.$router.go(1)' 去調用: // 在瀏覽器記錄中前進一步，等同于 history.forward() router.go(1) // 后退一步記錄，等同于 history.back() router.go(-1) // 前進 3 步記錄 router.go(3) // 如果 history 記錄不夠用，那就默默地失敗唄 router.go(-100) router.go(100) 3.forward 前進，跟go用法類似 4.back -- 返回上一頁沒有參數直接使用