VueRouter--$route獲取參數 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 獲取路由參數 ~~~ 1.'$route'一個路由對象 (route object) 表示當前激活的路由的狀態信息，包含了當前 URL 解析得到的信息，還有 URL 匹配到的路由記錄,簡單的說包含'當前路由規則，路徑,參數' 2.如圖此時的'$route'包含當前所在路由的信息 2.1.利用'$route.query'屬性獲取連接上的參數，url參數使用?形式 2.2.利用'$route.params' 獲取參數，url形式是/參數的形式 ~~~ * $route 參數說明 ![](https://img.kancloud.cn/d7/b5/d7b55a16e5592d26caa5478172c77e46_264x164.png) >[info] ## 使用$route ~~~ 1.'$router' 作為'VueRouter'實例對象可以用它提供的方法進行一些路由跳轉方面的操作 2.'$route' 可以獲取'當前路由規則，路徑,參數' ~~~ >[danger] ##### 第一種利用 -- $route.query 獲取 ~~~ <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app">  <router-link to="/login?id=10&name=zs">登錄</router-link> <router-link to="/register">注冊</router-link> <router-view></router-view> </div> <script> var login = { template: '<h1>登錄 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>', data(){ return { msg: '123' } }, created(){ // 組件的生命周期鉤子函數 // console.log(this.$route) // console.log(this.$route.query.id) } } var register = { template: '<h1>注冊</h1>' } var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] }) // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, // router: router router }); </script> </body> </html> ~~~ >[danger] 第二種 --- $route.params ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app">  <router-link to="/login/12/ls">登錄</router-link> <router-link to="/register">注冊</router-link> <router-view></router-view> </div> <script> var login = { template: '<h1>登錄 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>', data(){ return { msg: '123' } }, created(){ // 組件的生命周期鉤子函數 console.log(this.$route.params.id) } } var register = { template: '<h1>注冊</h1>' } var router = new VueRouter({ routes: [ { path: '/login/:id/:name', component: login }, { path: '/register', component: register } ] }) // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, // router: router router }); </script> </body> </html> ~~~ >[info] ## 文檔推薦使用方法 ~~~ 1.文檔推薦使用 props 將組件和路由解耦，上面的方法雖然簡單粗暴，但是對'$route' 有著依賴我們如何可以將下面這種代碼變得更加直觀: const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }); 2.我們注意到這種動態路由如果想在視圖組件中獲取到動態值，我們需要 '$route'的加持，下面使用官方推薦的'props' 來實現同一段代碼邏輯 ~~~ >[danger] ##### 使用props實現動態路由參數頁面獲取 ~~~ 1.在視圖組件中創建'props' 用來接受路由中的動態參數 2.在路由中開啟'props' 屬性并且設置為true 3.如果 props 被設置為 true，route.params 將會被設置為組件屬性。 4.下面案例中動態參數，已經在'props' 中在視圖組件中可以直接使用 ~~~ ~~~ <!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='/app/123'>sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{name}} </div> </template> <script type="text/javascript"> const sapp = { props:['name'], template:'#sapp', }; const routes=[ {path:"/app/:name", component:sapp,props:true}, ]; const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[danger] ##### 視圖組件動態路由解綁寫法 ~~~ 1.根據視圖名稱對應開啟是否使用'props' ~~~ ~~~ // 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] }) ~~~ >[danger] ##### 不是動態路由缺想傳遞一個固定的靜態值 ~~~ 1.有時候，路由雖然不是動態的，但我們想傳遞一個關鍵的靜態值，可以使用下面案例的方法 2.在路由的'props' 中定義一個對象，然后將對象的key 和視圖組件的'props' 進行綁定。在視圖組件中就可以接受到響應的參數信息 ~~~ ~~~ <!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='/app'>sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{name}} </div> </template> <script type="text/javascript"> const sapp = { props:['name'], template:'#sapp', }; const routes=[ {path:"/app", component:sapp,props:{name:"123"}}, ]; const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[danger] ##### '?' 傳參的時候獲取 ~~~ 1.上面講了動態路由的情況，還有一種情況當我們使用?傳遞參數的時候應該如何去獲取，官方提供了一種叫'函數模式' 2.不要被下面案例迷惑，函數模式相當于可以獲取'route'參數中任意內容，給到視圖組件，這里只是用'?'這種做了一個例子 ~~~ ~~~ <!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='/app?name="sss"'>sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{name}} </div> </template> <script type="text/javascript"> const sapp = { props:['name'], template:'#sapp', }; const routes=[ {path:"/app", component:sapp,props: (route) => ({ name: route.query.name })}, ]; const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~