Puzzled: the problem of vue-router nested routing

nesting routing in the official website, the original text says

const router = new VueRouter({
  routes: [
    { path: "/user/:id", component: User,
      children: [
        {
          //  /user/:id/profile 
          // UserProfile  User  <router-view> 
          path: "profile",
          component: UserProfile
        },
        {
          //  /user/:id/posts 
          // UserPosts  User  <router-view> 
          path: "posts",
          component: UserPosts
        }
      ]
    }
  ]
})

I want to ask why it matches / user/:id/profile rather than / user/profile , because doesn"t / user/profile look more like a child route under user? And what is the function of the middle layer? Thank you

Jan.24,2022

you delete : id and try again


/ user/:id. The actual url address is: xxx.com/-sharp/user/1
indicates that the route processing object User, will receive a parameter, id=1

In the vue instance of

User, you should have the following parameter:
props: ['id']

you can also use the following statement to take the value of id, but it is not recommended, because if you write it this way, the component must rely on vue-route
this.$route.params.id


he wants to conform to the restful style.,: id is the same as url parameter. For example, / user/1/profile is similar to / user/profile?id=1


  • : id dynamic routing means that you don't need it and can be used as a value. If you don't need it, you don't need to write it. You can just use it directly li >

this should be a combination of dynamic routing and nested routing. Of course, when dynamic matching is carried out, it can also be matched according to the business: name,:sex, etc. For more information, please see ide/essentials/dynamic-matching.html-sharp%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96" rel=" nofollow noreferrer "> https://router.vuejs.org/zh/g., which can be answered: the role of id, reuse appears to be more efficient

Menu