【Vue】路由Router嵌套的实现及经典案例

tech2022-12-01 91

Vue 中路由在使用的时候嵌套使用是非常频繁的，所以本文我们就来通过案例介绍一下嵌套路由的使用。

Vue路由嵌套

先来准备一个普通的路由案例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script> </head> <body> <div id="app"> <router-link to="/login" >登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> <script> // 创建两个子组件模板对象 var login = { template: "<h3>登录模块</h3>" } var register = { template: "<h3>注册模块</h3>" } // 创建路由对象 var routerObj = new VueRouter({ // 配置路由规则 routes:[ {path:"/",redirect:"/login"}, {path: "/login" , component: login}, {path: "/register" , component: register} ] }) var vm = new Vue({ el: "#app", data: {}, methods: {}, router:routerObj }) </script> </body> </html>

接下来我们看下嵌套路由的实现。

1、添加两个组件模板

var newc = { template:'<h2>新用户登录</h2>' } var oldc = { template:'<h2>老用户登录</h2>' }

2、修改登录组件

我们在登录组件中再嵌套一个路由模块，因为内容比较多，所以我们把这个 template 提取出来。

3、路由 children 使用

接下来我们需要配置嵌套的路由，具体如下：

注意：通过 children 配置的 path 中的路由地址不能加 “/” 开头。

实现效果：

路由经典案例

学完了路由嵌套的基础知识，接下来我们通过Router来实现一个经典页面布局的案例，效果如下：

完整代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script> <style> *{ margin: 0px; padding: 0px; } .header{ font-size: 40px; height: 70px; background-color: salmon; } .contain{ height: 600px; display: flex; } .left{ background-color: seagreen; flex: 1; } .right{ background-color: pink; flex: 9; } .left > div{ height: 50px; border-bottom:1px solid #fff; text-align: center; line-height: 50px; cursor: pointer; color:#fff; } </style> </head> <body> <div id="app"> <div class="header">看点资讯</div> <div class="contain"> <div class="left"> <div> <router-link to='/user'>用户管理</router-link> </div> <div> <router-link to='/article'>文章管理</router-link> </div> </div> <div class="right"> <router-view></router-view> </div> </div> </div> <script> // 组件 let user = { template:'<div>用户管理模块</div>' } let article = { template:'<div>文章管理模块</div>' } // router 路由对象 let router = new VueRouter({ routes:[ {path:"/",redirect:"/login"}, {path:'/user',component:user}, {path:'/article',component:article} ] }) new Vue({ el:'#app', data: { } , methods: { }, router,//注册路由 }) </script> </body> </html>

最新回复(0)