vue-router嵌套路由

2023-06-09  本文已影响0人  小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 >test</h1>
        <div>
            <router-link to="/user">user </router-linnk>
            <router-link to="/register"> register</router-linnk>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
<!--    
    嵌套路由用法
    父路由组件模板
        父路由链接
        父组件路由填充位
-->
<script src="./vue/vue.js"></script>
<script src="./vue/vue-router.js"></script>
<script >
    const tap1 = {
            template:"<h2> tap1 子组件</h2>"
    }

    const tap2 = {
            template:"<h2> tap2 子组件</h2>"
    }

    const router = new VueRouter({
        routes:[
            {
                path:"/",
                redirect:"/user"
            },
            {
                path:"/user",
                component:{
                    template:"<h1>HELLO USER</h1>"
                }
            },
            {
                path:"/register",
                component:{
                    template:`
                    <div>
                        <h1>HELLO REGISTER</h1>
                        <router-link to="/register/tap1">tap1</router-link>
                        <router-link to="/register/tap2">tap2</router-link>

                        <router-view></router-view>
                    </div>`
                    // 定义子路由规则,children是一个数组
                    
                },
                children:[
                        {
                            path:"/register/tap1",
                            component: tap1
                        },
                        {
                            path:"/register/tap2",
                            component: tap2
                        }
                    ]
            }
            ]   
    });

    const vm = new Vue({
        el:"#app",
        router:router
    });
    </script>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读