vue 路由嵌套(二级路由)

青旅半醒 2021-07-27 01:47 873阅读 0赞

#### 路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法。 ####

嵌套路由的关键字children，在父路由中添加children数组 中添加子路径

###### 1. 下面我们先来看一下效果图 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70 1]

###### 2. 首先我们如果想要使用路由的话必须要先引入vue.js和vue-router.js(src里的是我本地地址,大家根据需要替换不同路径) ######

![在这里插入图片描述][20200406013826994.png]

###### 3.我们要实例化VueRouter,并在里面配置路由 ######

var router = new VueRouter({ 
         routes:[
           
           ]
       })

###### 4.创建vue实例对象,并在其中声明一下router(注意:这里的router是上面的router,给路由起的一个变量名) ######

var vm = new Vue({ 
        el:'#app',
           router,
       })

###### 5.父组件中对用内容 ######

![在这里插入图片描述][20200406015332125.png]

###### 6.当我们点击职位时,对应的路由路径是/position,那么我们会在VueRouter找到/position(父亲对应的路由),redirect重定向路由到"/position/fe"(fe为二级路由路径),进入页面就能展示职位/前端开发里面的内容了,当然我们还要先引入子组件positionchild,点击前端职位或后端职位时时就能切换并展示children下面component里面子组件的内容了. ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70 3]

###### 注意:上面子路由中加不加‘/’ 的区别：当去到fe的时候加 ‘/'会在地址栏中显示 \#/fe;不加 ‘/'的时候回在地址栏中显示\#/position/fe ######

具体代码如下:

<body>
        <div id="app">
            <ul class="ulf">
                <router-link tag="li" class="f" to="/position" active-class="active">职位</router-link>
                <router-link tag="li" class="f" to="/search" active-class="active">搜索</router-link>
            </ul>
            <router-view></router-view>
        </div>
        <script>
            const positionchild = { 
                template:` <div class="s"> <ul> <router-link class="posfe" to="/position/fe" active-class="active">前端开发</router-link> <router-link to="/position/be" active-class="active">后端开发</router-link> </ul> <router-view></router-view> </div> `
            }
            var router = new VueRouter({ 
                routes:[
                    { 
                        path:"/position",
                        redirect:"/position/fe",
                        component:positionchild,
                        children:[
                            { 
                                path:'fe',
                                component:{ 
                                    template:` <div class="detail"> <ul> <li>前端开发1</li> <li>前端开发2</li> <li>前端开发3</li> </ul> </div> `
                                }
                            },
                            { 
                                path:'be',
                                component:{ 
                                    template:` <div class="detail"> <ul> <li>后端开发1</li> <li>后端开发2</li> <li>后端开发3</li> </ul> </div> `
                                }
                            }
                        ],
                        
                    },
                    { 
                        path:"/search",
                        component:{ 
                            template:` <div class="s">search</div> `
                        }
                    },
    
                ]
            })
            var vm = new Vue({ 
                el:'#app',
                router,
            })
        </script>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70]: /images/20210726/684ce694536b42749c1441f37bd01ec0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70 1]: /images/20210726/d84fa2f548954c87951b1824483e4ed9.png
[20200406013826994.png]: /images/20210726/bc356792b18a4977be77bf167df1be9e.png
[20200406015332125.png]: /images/20210726/4df41d8e0f5d41248f9c71a93d448efd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70 2]: /images/20210726/b63feef1cd6d445fa840a07d8779c852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70 3]: /images/20210726/8faa022e02174d06aa4507ff92e0914d.png