vue之动态路由

关键词:路由

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)来达到这个效果:

    <div id="box">
        <ul>
          <router-link to="/user/way">方法</router-link>
          <router-link to="/user/dir">目录</router-link>
        </ul>
        <router-view></router-view>
    </div>
   const User = {
       template: `<div>User {{ $route.params.id }}</div>`
   }

   const router = new VueRouter({
     routes: [
       { path: '/user/:id', component: User }
     ]
   });

   new Vue({
    el:'#box',
     router
   });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,032评论 19 139
  • vue2有着深度继承的路由插件,即:vue-router,其中文的API地址。 vue-router与其他的路由(...
    白水螺丝阅读 17,570评论 0 17
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,228评论 8 124
  • 一场大风吹散了北京的雾霾, 月色皎洁, 弯弯地挂在南空。 一群小甲壳虫涌入地铁, 匆匆, 还有不慌不忙的谈笑声。 ...
    白鹤来翔阅读 231评论 7 4
  • 最近两个月,骑行的地方,都是寺庙,朋友就问:“信佛了?”,所以我今天就一直在考虑这个问题。我信佛了? 去一趟...
    wjs笨小孩阅读 427评论 0 2