vueRouter-嵌套路由原

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo">user/foo</router-link>
            <router-link to="/user/bar/profile">user/bar/profile</router-link>
            <router-link to="/user/foo/posts">user/foo/posts</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
   const User ={
    template:`
    <div class="user">
      <h2>{{$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:[
             {path:'',component:UserHome},
             {path:'profile',component:UserProfile},
             {path:'posts',component:UserPosts},
        ]
  }
    ]
   })
   const app = new Vue({router}).$mount("#app")
    </script>
</body>

(adsbygoogle = window.adsbygoogle || []).push({});

vueRouter-嵌套路由 原

vueRouter-嵌套路由原