Vue Router中的嵌套路由

嵌套路由

我们知道，Vue Router文档中的动态路由匹配内容中，有一个案例为：

Vue文档案例

当我们有多级目录时：例如：有用户1001和用户1002，他们分别有一个goToProfile和goToPost的选项，分别对应This is ‘User.id' Profile和This is 'User.id' Posts的内容展示。那么我们的嵌套路由大概是这样的：

嵌套层次

那么首先，搭建好基础路由结构：

const User = {

  template: `

   

     

User

     

        User 1001

        User 1002

     

     

   

  `

}

const UserDetail = {

  template: `

   

     

User Detail{{$route.params.id}}

      User 1001

      User 1002   

     

   

  `

}

const UserProfile = {

  template: `

   

     

This is User{{$route.params.id}} Profile

     

   

  `

}

const UserPosts = {

  template: `

   

     

This is User{{$route.params.id}} Posts

     

   

  `

}

const router = new VueRouter({

  routes: [

    {

      path:'/user',

      component: User,

      children: [

        {

          path: '/user/:id',

          component: UserDetail,

          children: [

            {

              path: 'profile',

              component: UserProfile

            },

            {

              path: 'post',

              component: UserPosts

            }

          ]

        }

      ]

    }

  ]

})

new Vue({

  el:'#app',

  router

})

index.html中结构

我们在网页中可以得到基础的结构

点击User 1001后，路径和对应模板展示出来

结果如图

对应的，User 1002展示的模板为User Detail1002。接下来，想展示第三层嵌套路由，发现并不是我们所实际的那样，出现This is User{{$route.params.id}} Profile的内容，反而在第二层中替换了我们的 Detail1002，原因是我们的url地址被所点击的内容替换了。说明我们使用的跳转路径出现了问题

结果如图

解决办法

思路

首先，我们使用Router的$route属性查看路由内容，创建一个方法：

beforeUpdate() {

    console.log(this.$route)

  }

输出如下内容

我们想得到的结果在params属性中，有一个对象为{id:'profile}，说明此时我们我们原来应该有的1001id被替换了。

修改to中的url

这时，我们有一个思路，就是更改url地址，虽然上图得到结果，但是存在一定的问题。说明并不是正确的解决办法。

解决

在