05_07.路由嵌套配置

作者: Robyn_Luo | 来源:发表于2017-11-18 21:38 被阅读0次

05_07.路由嵌套配置
单页面中使用多组件并使用vux通信
vue路由的介绍（四）--嵌套路由
Vue路由
Vue路由嵌套与路由模块化
angularjs 子路由
vue组件的嵌套 20
vue-路由
vue路由
Vue 路由基础

1. 代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ msg }}
        <!-- 路由占位 -->
        <router-view></router-view>
    </div>

    <script src="vue.js"></script>
    <script src="vue-router.js"></script>

    <script>

        // 首页下面的方块导航
        var Fang = {
            template: `<div>首页下面的方块导航</div>`
        };

        // 首页下面的长条导航
        var Tiao = {
            template: `<div>首页下面的长条导航</div>`
        };


        // 首页组件
        var Home = {
            template: `
            <div>
                首页
                <router-view></router-view>
            </div>`
        };

        // 登陆页
        var Login = {
            template: `<div>登陆页</div>`
        };

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '路由演示'
            },
            // 路由配置
            router: new VueRouter({

                // 路线配置
                routes: [
                    { path: '/index', component: Home, 
                        children: [
                            // 这里的paht默认会和父级路径拼接, 但是不要加/,加了就是绝对路径了
                            { path: 'fang', component: Fang  },
                            { path: 'tiao', component: Tiao }
                        ]
                    },
                    { path: '/login', component: Login }
                ]
            })
        });
    </script>
</body>
</html>