# vue中路由的基本使用 # 通過方法進行路由跳轉 this.$router.push() - ``` <pre class="calibre15">``` 跳轉到指定url的路徑 并向history棧中添加一個記錄 點擊后退會返回到上一個頁面 ``` ``` this.$router.replace() - 跳轉到指定url路徑 但是history棧中不會有記錄 點擊返回不會跳轉到上個頁面 this.$router.go(n) - ``` <pre class="calibre15">``` 向前或向后跳轉n個頁面 n為正整數或負整數 ``` ``` # router-link中拼接字符串 `<router-link :to =" '/user/'+userId">用戶</router-link>` # 獲取路由上面的參數值 在方法中 this.$route當前那個路由處于活躍狀態 就是拿到的是哪個路由 在注冊路由的時候: { path: '/user/:userId' } this.$route.params.userId 就可以拿到路由地址中userId的參數值 如果注冊路由 { path:'/user/:abc' } 使用 this.$route.params.abc 就可以拿到路由的參數值 在模板中: `<h2>{{$route.params.abc}}</h2>` 比如 正常我們在方法中設置 this.message = '223'在模板中采用{{message}}進行調用 # 路由懶加載 > 路由中會定義很多不同的頁面 > 這個頁面一般情況下 是打包放在一個js文件中 > 如果我們一次性從服務器請求下來這個頁面 可能需要花費一定的時間 甚至用戶的電腦還出現了短暫的空白的情況 > 如何避免? 使用路由懶加載就可以了 # 路由懶加載做了什么? 路由懶加載的主要作用就是將路由對應的組件打包成一個個的js代碼塊 只有在這個路由被訪問到的時候 才加載對應的組件 # 怎么使用: 使用箭頭函數就可以實現:  # 路由嵌套 > 步驟 > 創建對應的子組件 并且在路由映射中配置對應的子路由 > 在組件內部使用標簽 > 定義路由子路由格式,例如: > path: '/home', > component: Home, > children: \[ > { > path: 'news' > }, > { ``` <pre class="calibre13">``` <span class="token1">}</span> ``` ``` \] # 路由傳遞參數: > 第一種 router-link 綁定路徑和參數 然后用this.route.params獲取參數 > 第二種 router-link :to = 對象 對象中設置path和query對象 query對象中設置參數 >  > 點擊的時候 路由變成了路徑?name =why&age=18&height=1.88 > 獲取路由的信息 就是this.$route.query > 上面是通過router-link傳遞參數 下面是通過button傳遞參數 > 方法中使用this.$router.push(路徑+參數(this.userId)) push 里面也可以使用對象