Vue第二部分(4)： 嵌套路由和路由传参
生活随笔
收集整理的這篇文章主要介紹了
Vue第二部分(4)： 嵌套路由和路由传参
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
嵌套路由
實際生活中的應用界面，通常由多層嵌套的組件組合而成。當我們路由到某一個組件后，還經常需要在該組件中繼續路由到其子組件，這就需要使用Vue的嵌套路由。比如：當我們路由到登錄組件后，又分為手機驗證碼登錄和 賬戶名密碼登錄 2個子組件。
示例
<body><div id="app"><router-link to="/login">登錄</router-link><router-link to="/register">注冊</router-link><hr><router-view></router-view></div><template id="phone-login-form"><form action="">手機號: <input type="number" name="phone" > <br>驗證碼: <input type="password" name="code"> <br><input type="submit" value="登錄"></form></template><template id="account-login-form"><form action="">用戶名: <input type="text" name="username" > <br>密碼: <input type="password" name="pwd"> <br><input type="submit" value="登錄"></form></template><template id="register-form"><form action="">用戶名: <input type="text" name="username" > <br>密碼: <input type="password" name="pwd1"> <br>確認密碼: <input type="password" name="pwd2" > <br><input type="submit" value="注冊"></form></template><script>const registerForm = {template:"#register-form"}const phoneLogin = {template:"#phone-login-form"}const accountLogin = {template:"#account-login-form"}const loginForm = {template:`<div><router-link to="/login/phone">手機驗證碼登錄</router-link><router-link to="/login/account">用戶名密碼登錄</router-link> <br> <br><router-view></router-view></div>`}const router = new VueRouter({routes:[{path:"/",redirect:"/register"},{path:"/register",component:registerForm},{path:"/login",component:loginForm,children:[{path:"phone",component:phoneLogin},{path:"account",component:accountLogin}]}]})const vm = new Vue({el:"#app",router})</script> </body>路由組件傳參
通過路由導航到組件時，有時需要傳遞參數。
1.query傳參
<div id="app"><router-link to="/user?name=李栓蛋&age=38">用戶管理</router-link><router-link :to="{path:'/user',query:{name:'王花花',age:28}}">用戶管理</router-link><router-view></router-view> </div> <script>const user = {template:`<div><div>我叫{{$route.query.name}}</div><div>今年{{$route.query.age}}</div></div>`}const router = new VueRouter({routes:[{path:"/user",component:user}]})const vm = new Vue({el:"#app",router}) </script>2.params傳參
<div id="app"><router-link to="/product/macbookair">商品1</router-link><router-link :to="{name:'product',params:{name:'macbookpro'}}">商品2</router-link> <router-view></router-view> </div> <script>const product = {template:`<div><div>商品名：{{$route.params.name}}</div> </div>`}//通過:參數名的方式匹配數據const router = new VueRouter({routes:[{name:"product",path:"/product/:name",component:product}]})const vm = new Vue({el:"#app",router}) </script>總結
以上是生活随笔為你收集整理的Vue第二部分(4)： 嵌套路由和路由传参的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python后端和爬虫_10分钟教你Py
- 下一篇： Vue第一部分(6)：Vue的生命周期