02路由 vue嵌套路由的实现

最新推荐文章于 2024-04-29 23:47:56 发布

asdfwxy

最新推荐文章于 2024-04-29 23:47:56 发布

阅读量134

点赞数

分类专栏： vue 文章标签：嵌套vue路由实现

本文链接：https://blog.csdn.net/asdfwxy/article/details/102624985

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1：从中开始，点击后进入其对应的组件
2：在父组件的内部写子组件的
3：在父组件的routes对象中写子组件的路由路径，使用children，与父组件path并列。

<body>
    <div id="app">
        <!-- #1 这里直接进入到account，点击account进入到下面的Account组件 -->
        <router-link to="/account">account</router-link>
        <router-view></router-view>
    </div>
    <template id="tmp1">
        <div>
            <h1>这是Account组件</h1>
            <!-- #2 在account组件里面写login，register组件的链接,
            点击进入到登录，注册组件，前面带有account是为了表示account组件下面的，在地址栏会显示 -->
            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="log">
        <div>这是登录组件</div>
    </template>
    <template id="reg">
        <div>这是注册组件</div>
    </template>
    <script>
        var account ={
            template:'#tmp1'
        }
        var login={
            template:'#log'
        }
        var register={
            template:"#reg"
        }
        var router = new VueRouter({
            routes:[
                {
                    path:'/account',
                    component:account,
                    children: [
                    //#3  注册路由路径，使用children属性，前面不要带/,否则永远以根路径开头，
                    //也不要拼接acount，已经表示其下面
                    //在account路径下面注册login，register，path中就可以不加account
                    {path:'login',component:login},
                    {path:'register',component:register}
                ]
                },
            ]
        })
        var vm=new Vue({
            el:"#app",
            data:{},
            method:{},
            router
        })
    </script>
</body>

asdfwxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02路由 vue嵌套路由的实现

1：从中开始，点击后进入其对应的组件2：在父组件的内部写子组件的3：在父组件的routes对象中写子组件的路由路径，使用children，与父组件path并列。<body> <div id="app">  <r...
复制链接

扫一扫

专栏目录