Vue中路由嵌套（子路由）

2023-11-13 00:58| 来源: 网络整理| 查看: 265

路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。根据我们前面学习的VueRouter的知识，可以直接写出代码来实现：

一般写法 Document account Account组件登录 var account = { template:'#temp', } var router = new VueRouter({ routes:[ {path:'/account',component:account}, ] }) new Vue({ el:'#app', data:{}, methods: {}, router })

点击account—路由跳转到/account下：在这里插入图片描述再点击登录，跳转至/account/login：

改进写法

我们发现login路由是account路由下的一个子路由，形成了一个父子组件路由。VueRouter提供给我们一个属性== children ==来是实现路由的嵌套：

Document account 这是Account组件登录注册 var account={ template:'#temp' } var login={ template:'登录的组件显示' } var register={ template:'注册的组件显示' } var router=new VueRouter({ routes: [ { path:'/account', component:account, children:[ {path:'login',component:login}, {path:'register',component:register} ] }, ] }) var vm=new Vue({ el:'#app', data:{}, methods: { }, router })

点击account，跳转到子路由login中：在这里插入图片描述再分别点击子路由，进入到子路由下：

注意

使用children属性实现子路由时，子路由path前面不能带/，以/ 开头的嵌套路径会被当作根路径否则会永远以根路由开始请求, 这样不方便我们调用渲染数据

应用— 实现一个经典布局 Document html,body{ margin: 0; padding: 0; } .header{ background-color: orange; height:80px; } h1{ margin: 0; padding: 0; font-size: 16px; } .container{ display: flex; height: 600px; } .left{ background-color: lightgreen; flex: 2; } .main{ flex: 8; background-color: lightpink; } var header={ template:'Header头部区域' } var leftBox={ template:'Left侧边栏区域' } var mainBox={ template:'mainBox主体内容' } var router=new VueRouter({ routes: [ { path:'/', components:{ 'default':header, 'left':leftBox, 'main':mainBox } } ] }) var vm=new Vue({ el:'#app', data:{}, methods: { }, router })

在这里插入图片描述

【本文地址】

Vue中路由嵌套（子路由）

Vue中路由嵌套（子路由）

今日新闻

推荐新闻