vue2路由--嵌套路由

阳光穿透心脏的1/2处 2021-09-14 15:10 539阅读 0赞

一般应用中的路由方式不会像上述例子那么简单，往往会出现二级导航这种情况。这时就需要使用嵌套路由这种写法。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>routerTest1</title>
        <c:import url="importFile.jsp"></c:import>
    </head>
    <body>
    <div id="app">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <%--定义跳转的路径--%>
                        <li class="active"> <router-link to="/home">Home</router-link></li>
                        <li> <router-link to="/list">List</router-link></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <!—路由切换组件template 插入的位置 -->
            <router-view></router-view>
        </div>
    </div>
    
    <script type="x-template" id="modalTel">
        <div>
            <h1> this is home page </h1>
            <div>
                <ul >
                    <li>
                        <router-link to="/home/lists">List</router-link>
                    </li>
                    <li>
                        <router-link to="/home/detail">Detail</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    
    </script>
    <script>
    
        /*
         * var Home = Vue.extend({
         template:'<h1> this is home page </h1>',
         })
         * */
        /*使用Javascript模板定义组件*/
        var Home = Vue.extend({
            template:'#modalTel'
        })
    
        /*创建路由器实例*/
        const router = new VueRouter({
            routes:[
                { path: '/', redirect: '/home' },
                {
                    path:'/home',
                    component:Home,
                    /*嵌套下的路由（子路由）*/
                    children:[
                        {
                            path:'/home/lists',
                            component:{
                                template:'<h1> this is lists pages</h1>'
                            },
    
                        },
                        {
                            path:'/home/detail',
                            component:{
                                template:'<h1> this is detail pages</h1>'
                            },
                        }
                    ]
                },
                {
                    path:'/list',
                    component:{
                        /*显示路由的属性*/
                        template:'<h1> this is list page----{
       {$route.path}}</h1>'
                    }
                }
            ]
        });
        const app = new Vue({
            router:router
        }).$mount('#app')
    </script>
    </body>
    </html>

![SouthEast][]  
上文中的 importFile,jsp 在上一篇路由基本用法中介绍过了，就是引入需要的文件。 [http://blog.csdn.net/m0\_37479246/article/details/79146951][http_blog.csdn.net_m0_37479246_article_details_79146951]；

[SouthEast]: /images/20210813/d3f5080800254155bb93badd07646094.png
[http_blog.csdn.net_m0_37479246_article_details_79146951]: http://blog.csdn.net/m0_37479246/article/details/79146951