398 嵌套路由/子路由： children

2020-03-21 15:52:30 阅读：225 来源： 互联网

标签：const parent component child path 398 children 路由

导入： url测试 parent 和child，想让child 在 parent 中显示

parent 的内部添加： <router-view> </router-view>
规则里添加 children
/child 和 child 的区别
- 如果是/child => 那么访问就可以直接访问#/child就可以访问子组件
- 如果是child => 那么访问就应该访问#/parent/child才可以访问子组件

const parent = {
    template： `<p>parent  <router-view> </router-view> </p>`
}
const child = {
    template： `<p>child</p>`
} 

const router = new VueRouter({
    routes： [
        {
            path： '/parent'，
            component： parent，
            children： [
                { path： '/child'， component： child }
            ]
        }
    ]
})

07-嵌套路由.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1. 入口 -->
        <!-- 
            需求: child组件 放到 parent组件 里面
            办法: children: [路由规则]
        -->

        <!-- 4. 出口 -->
        <router-view></router-view>
        <hr />
    </div>

    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 3. 组件
        const parent = {
            template: `<div> parent组件 -- <router-view></router-view> </div>`
        }

        const child = {
            template: `<div>child组件</div>`
        }

        //  实例化
        const router = new VueRouter({
            // 2. 规则
            routes: [{
                path: '/parent',
                component: parent,
                children: [{
                    // 子组件的path值前，加斜杆/，则浏览器的url中不需要写成 /parent/child，直接写/child即可。不加的话，就要写成 /parent/child
                    path: '/child',
                    component: child
                }],
                // children: [{
                //     path: 'child',
                //     component: child
                // }]

                //  path : '/child'    => 哈希值 : /child
                //  path : 'child'     => 哈希值 : /parent/child
            }]
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>

标签：const,parent,component,child,path,398,children,路由
来源： https://www.cnblogs.com/jianjie/p/12539657.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

398 嵌套路由/子路由： children