Vue-路由3 路由嵌套

一、实现方式

在路由中的children属性，该属性是一个数组，数组元素是对象，对象内容同routes。

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        7.父路由的router-view-->
        <router-view></router-view>
    </div>

<!--    1.定义父组件模板-->
    <template id="parentTmp">
        <div>
            <h1>父组件</h1>
<!--            注意：path中有/时，路径是对应path中的，否则是 父路径/子路径 -->
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
<!--            该组件的子路由-->
            <router-view></router-view>
        </div>
    </template>

<!--    2.定义子组件模板-->
    <template id="login">
        <h1>登录组件</h1>
    </template>
    <template id="register">
        <h1>注册组件</h1>
    </template>
<script>
    // 3.创建组件模板对象
    var parentTmp = {
        template: '#parentTmp'
    }
    var login = {
        template: '#login'
    }
    var register = {
        template: '#register'
    }
    // 4.创建父路由实例
    var router = new VueRouter({
        routes: [
            {path: '/',
             component: parentTmp,
             children: [
                 // 注意：path有/表示从根路径开始，没有的时候是通过当前路径进行拼接
                 {path: '/login', component: login},
                 {path: '/register', component: register}
             ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router // 6.注册路由
    })
</script>
</body>
</html>

更新时间：2019-12-22

来源：CSDN

作者：SevenSongyun

链接：https://blog.csdn.net/SevenSongyun/article/details/103653401

标签

vue

路由

vue路由