嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。当我们路由到某一个组件后，还经常需要在该组件中继续路由到其子组件，这就需要使用Vue的嵌套路由。比如：当我们路由到登录组件后，又分为手机验证码登录和账户名密码登录 2个子组件。

语法：
const 子组件 = {template:"子组件标签"
}const 父组件 = {tempalate:`<router-link to="/父组件路径/子组件的路径">链接1</router-link><router-view></router-view>`
}const router = new VueRouter({routes:[{path:"/组件路径",component:父组件对象,children:[//设置子路由信息{path:"子组件路径",//  通常不以/开头component:子组件}]}]
})

示例

<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)：嵌套路由和路由传参相关推荐

vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
Vue之路由的query传参加密解密
首先,创建一个base64.js const Base64 = {//加密encode(str) {return btoa(encodeURIComponent(str).replace(/%([0- ...
React学习：路由定义及传参、数据复用-学习笔记
文章目录 React学习:路由定义及传参.数据复用-学习笔记在React中使用react-router-dom路由简单例子路由定义及传参 React学习:路由定义及传参.数据复用-学习笔记在R ...
flutter 返回指定界面_Flutter页面路由导航及传参
转载请注明出处: https://learnandfish.com/ 概述每个应用都有很多个页面,在flutter中同样也有很多页面,被称之为路由(Router),页面之间的跳转通过导航器(Navi ...
一篇文章说完Flutter页面路由导航及传参
目录前言动态路由静态路由静态路由传参 Fluro 实现路由导航与传参前言在 Flutter 中,App 多个页面之间的跳转是由 Navigator(导航器)来管理的,如常见的 Naviga ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
Vue 路由组件通讯传参的 8 种方式
当 props 是一个对象时,它将原样设置为组件 props.当 props 是静态的时候很有用. 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过 ...
VUE路由跳转传参的七种方法
vue中每个页面都需要在路由中声明,就是在router/index.js中写 import Vue from 'vue' import Router from 'vue-router' import ...
vue路由跳转传参的几种方式
需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout'const repairRouter = {path: '/repair',co ...

Vue第二部分(4)：嵌套路由和路由传参

嵌套路由

路由组件传参

1.query传参

2.params传参

Vue第二部分(4)：嵌套路由和路由传参相关推荐

最新文章

热门文章

Vue第二部分(4)： 嵌套路由和路由传参

嵌套路由

路由组件传参

1.query传参

2.params传参

Vue第二部分(4)： 嵌套路由和路由传参相关推荐

最新文章

热门文章

Vue第二部分(4)：嵌套路由和路由传参

Vue第二部分(4)：嵌套路由和路由传参相关推荐