使用children属性实现路由嵌套

最新推荐文章于 2023-07-10 01:02:48 发布

_有光

最新推荐文章于 2023-07-10 01:02:48 发布

阅读量1.1k

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/youguang_/article/details/88392354

版权

Vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <router-link to="/account">Account</router-link>
        <router-view></router-view>
    </div>
    <template id="temp1">
        <div>
            <h1>这是Account组件</h1>
            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
    <script src="vue-router.js"></script>
    <script>
        var account = {
            template:"#temp1"
        };
        var login = {
            template:"<h3>登录</h3>"
        };
        var register = {
            template:"<h3>注册</h3>"
        };
        var routerObj = new VueRouter({
            routes:[
                {   path:"/account",
                    component:account,
                    //使用children属性，实现子路由，同时子路由的path前面不带/
                    children:[
                        { path:"login",component:login},
                        { path:"register",component:register}
                    ]
                }

            ]
        });
        var vm = new Vue({
            el:"#app",
            data:{},
            method:{},
            router:routerObj
        })
    </script>
</body>
</html>