vue笔记-19（vue路由参数和嵌套路由）
2020-10-14 本文已影响0人
7ColorLotus
- 路由规则中定义参数
- 使用查询参数则不需要修改path,调用方式<router-link to="/login?id=1">，在组件模板中使用this.$route.query.id获取
- 使用路径变量传参，需要修改path,如”/login/:id“。调用方式<router-link to="/login/1">，使用this.$route.params.id
- 代码demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02vue-router路由参数</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="./lib/vue-router.js"></script> <!-- routerlink默认选中样式为router-link-active --> <style> .router-link-active{ color:red; background-color: green; font-size: 20px; } .v-enter, .v-leave-to{ opacity: 0; transform: translateX(150px) } .v-enter-active, .v-leave-active{ transition: all 0.5s ease; } </style> </head> <body> <div id="app"> <!-- 1. 使用查询参数方式传参，不用修改vue-router中的path --> <router-link to="/login?id=1" tag="span">登录</router-link> <!-- 2. 使用路径变量方式传参，需要修改vue-router中的path --> <router-link to="/register/1" tag="span">注册</router-link> <!--展示路由组件的元素--> <transition mode="out-in"> <router-view></router-view> </transition> </div> <template id="login"> <div> <br/> 用户名：<input type="text" name="username" id="username"><br/> 密码：<input type="text" name="password" id="password"><br /> <input type="button" value="登录"><br /> this is the login page.the transform param is {{this.$route.query.id}} </div> </template> <template id="register"> <div> <br /> 用户名：<input type="text" name="username" id="username"><br /> 密码：<input type="text" name="password" id="password"><br /> 确认密码：<input type="text" name="password" id="password"><br /> <input type="button" value="注册"><br /> this is the register page.the transform param is {{this.$route.params.id}} </div> </template> <script> //定义VueRouter变量 var routerObj = new VueRouter({ routes: [ { path: '/login', component: { template: '#login' } //通过component指定路由跳转到的组件 }, { path: '/register/:id', component: { template: '#register' } } ] }) var vm = new Vue({ el: '#app', data: {}, methods: {}, router: routerObj }) </script> </body> </html> - 路由的嵌套
- 在vue-router对象里定义children属性
- 子路由路径地址最好使用”父路由名/子路由名“的方式定义跳转路由路径
- 在子路由children里定义的path, 最好不要带有/前缀,否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
- 代码demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04vue-router路由嵌套</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="./lib/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/account">账户</router-link> <!-- 显示父路径 /account 展示跳转组件的页面 --> <router-view></router-view> </div> <template id="account"> <div> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <!-- 需要在父模板里定义 router-view 用于展示子路径跳转组件显示的页面 --> <router-view></router-view> </div> </template> <template id="login"> <div> <br /> 用户名：<input type="text" name="username" id="username"><br /> 密码：<input type="text" name="password" id="password"><br /> <input type="button" value="登录"><br /> </div> </template> <template id="register"> <div> <br /> 用户名：<input type="text" name="username" id="username"><br /> 密码：<input type="text" name="password" id="password"><br /> 确认密码：<input type="text" name="password" id="password"><br /> <input type="button" value="注册"><br /> </div> </template> <script> //定义VueRouter变量 var routerObj = new VueRouter({ routes: [{ path: "/account", component: { template: '#account' }, children: [{ path: 'login', //注意这里的路径不能以 "/" 开头 component: { template: '#login' } }, { path: 'register', component: { template: '#register' } }] }] }) var vm = new Vue({ el: '#app', data: {}, methods: {}, router: routerObj }) </script> </body> </html>
