【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候 嵌套 使用是非常频繁的，所以本文我们就来通过案例介绍一下嵌套路由的使用。Vue路由嵌套先来准备一个普通的路由案例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script
·
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
0- 0
已为社区贡献4条内容
所有评论(0)