首页 / VUE / vue-router嵌套路由

vue-router嵌套路由

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue-router嵌套路由，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1627字，纯文字阅读大概需要3分钟。

内容图文

vue-router嵌套路由

1.例子如下

vue-router嵌套路由 - 文章图片

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-router嵌套路由全部内容，希望文章能够帮你解决vue-router嵌套路由所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/986882.html

来源：【匿名】