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

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

Vue路由嵌套

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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: "

登录模块

"
} var register = { template: "

注册模块

"
} // 创建路由对象 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>

【Vue】路由Router嵌套的实现及经典案例_第1张图片

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

1、添加两个组件模板

var newc = {
     
    template:'

新用户登录

'
} var oldc = { template:'

老用户登录

'
}

2、修改登录组件

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

【Vue】路由Router嵌套的实现及经典案例_第2张图片

3、路由 children 使用

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

【Vue】路由Router嵌套的实现及经典案例_第3张图片
注意:通过 children 配置的 path 中的路由地址不能加 “/” 开头。

实现效果:
【Vue】路由Router嵌套的实现及经典案例_第4张图片

路由经典案例

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

【Vue】路由Router嵌套的实现及经典案例_第5张图片

完整代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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:'
用户管理模块
'
} let article = { template:'
文章管理模块
'
} // 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>

你可能感兴趣的:(vue)