首页 > 其他分享> > vue-router嵌套路由

vue-router嵌套路由

2021-05-08 19:31:55 作者：互联网

vue-router嵌套路由

1.例子如下

在这里插入图片描述

2.注意

最重要的就是在父组件里面添加子组件，如下：

<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
 <!-- 子路由的占位符 -->
<router-view />

3.代码如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            template: `<div>User组件</div>`
        }
        var Register = {
            template: `<div>
            Rgister组件
            <hr/>
         <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>
          <!-- 子路由的占位符 -->
          <router-view />`

        }
        var tab1 = {
            template: `<div>tab1</div>`
        }
        var tab2 = {
            template: `<div>tab2</div>`
        }

        var router = new VueRouter({
            // router是路由规则数组
            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                { path: '/user', component: User },
                {
                    path: '/register', component: Register, children: [
                        { path: '/register/tab1', component: tab1 },
                        { path: '/register/tab2', component: tab2 }
                    ]
                },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>

标签：vue,tab2,tab1,component,嵌套,path,var,router,路由
来源： https://blog.csdn.net/weixin_51811318/article/details/116539752