vue nested routing

1. Reason for existence
It is simpler to express the relationship between multiple nested components. A rendered component can also contain<router-view>

const User={
    template:`
    <div class="user">
        <h2>user {{ $route.params.id }}</h2>
        <router-view></router-view>//嵌套的出口
    </div>
    `
}

To render components in nested exits, you must use configuration in VueRouterthe parameters of children, so you can nest multiple layers of routing.children和routes是一致的。

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

If an empty sub-route is not provided in the sub-component, then the route exit will not render anything when the sub-route's path does not exist. Based on the above configuration, when accessing /user/foo, the routing exit does not render anything.

const router=new VueRouter({
 routes:[
  {
  path:'/user/:id',component:User,
  children:[
  {
  path:'',component:UserHome
  },
  //...其他子路由
  ]
  }
 ]
})

Here is an example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>HelloWorld</title>  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>    
<body>  
  <div id="app">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/user/foo">User</router-link>
      <router-link to="/user/foo/profile">UserHome</router-link>
      <router-link to="/user/foo/posts">posts</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
<script> 
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

const app = new Vue({ router }).$mount('#app')
</script>  

</body>  
</html>

Finally, clicking is equivalent to calling router.push(…).

Guess you like