Vue-vue-router（二）嵌套路由

最新推荐文章于 2024-07-07 20:15:00 发布

refaker

最新推荐文章于 2024-07-07 20:15:00 发布

阅读量687

点赞数

分类专栏： vue-router

本文链接：https://blog.csdn.net/refaker/article/details/115487115

版权

本文介绍了Vue-router的嵌套路由概念，说明如何在已有的路由组件中使用<router-view>进行嵌套，强调在VueRouter配置中使用children属性来定义多级路由，并提到了每个嵌套级别需要相应的<router-view>。

摘要由CSDN通过智能技术生成

在vue-router（一）中已经提到过，路由匹配的组件将会渲染到<router-view></router-view>中

而在渲染的组件中，同样也可以通过嵌套路由渲染组件。

<div id="app">
    <router-view></router-view>
</div>

const home = {
    template: '<div>this is home</div>'
};

const router = new VueRouter({
    routes: [{
        path: '/home', 
        component: home
        }
    ]
})

在App.vue中的<router-view>是最顶层的出口，用来渲染最高级路由匹配的组件，此时为home.vue组件。而在home.vue中，还可以渲染嵌套路由匹配到的组件。

const home = {
    template: `
        <div>
            <span>this is home</span>
            <router-view></router-view>
        </div>`
};

const router = new VueRouter({
    routes: [{
        path: '/home', 
        component: hom