vueRouter-嵌套路由

最新推荐文章于 2024-10-01 05:04:32 发布

weixin_34351321

最新推荐文章于 2024-10-01 05:04:32 发布

阅读量71

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1535625

版权

2019独角兽企业重金招聘Python工程师标准>>>

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，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>

转载于:https://my.oschina.net/u/2612473/blog/1535625