vueRouter-嵌套路由
vueRouter-嵌套路由
tianyawhl 发表于1个月前
vueRouter-嵌套路由
  • 发表于 1个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

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

 

共有 人打赏支持
粉丝 2
博文 150
码字总数 56306
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: