Vue-router动态匹配

动态匹配的基本用法

思考一下，是否可行

<router-link to="/hh/1">花花1</router-link>
<router-link to="/hh/2">花花2</router-link>
<router-link to="/hh/3">花花3</router-link>

{path:'/hh/1',component:hh}，
{path:'/hh/2',component:hh}，
{path:'/hh/3',component:hh}，

相信有童鞋是觉得没有问题的 ，但是如果是100个呢？1000个呢？10000个呢？咱们也去这么匹配么？

so动态匹配就出来啦

应用场景：

路径有一部分是相同的，不同的部分配给路由参数的模式进行路由匹配

var router=new VueRouter({

routes：[

    //注意：动态路径参数 **以冒号开头**

    {path：'/user/:id'，component：User}

]

})

 const User={

    //路由组件通过$route.params获取路由参数

​     template:'<h1>User组件{
  
  {$route.params.id}}</h1>',

​    }

路由组件传递参数

$route 与对应的路由形成高度耦合，不够灵活，所有可以使用props将组件和路由解耦

1.props为布尔值

最常用，也比较简单