动态路由匹配

动态路由的概念

动态路由是指：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在vue-router中使用英文冒号（：）来定义路由规则的参数项。示例代码如下：

{path:'/movie/:id',component:Movie}
//将以下三个路由规则合并为一个，提高了路由的复用性
{path:'/movie/1',component:Movie}
{path:'/movie/2',component:Movie}
{path:'/movie/3',component:Movie}

举例：
路由规则：

 // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    // 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
    //使用：来声明参数，参数名自取，在movie组件中，mid为props匹配的参数名
    //动态参数项使用参数值
    //this._routerRoot._route.params.mid拿到当前的mid值
  
    //this._routerRoot._route是路由的参数对象
     //this._routerRoot._route是路由的导航对象
    { path: '/movie/:mid', component: Movie},
     <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

//在组件中定义props数组
  // 接收 props 数据
  props: ['mid'],
//在router中
  //可以为路由规则开启props传参，从而方便的拿到动态参数的值
   { path: '/movie/:mid', component: Movie, props: true },

<!-- 注意：在 hash 地址中，? 后面的参数项，叫做“查询参数” -->
 //在路由”参数对象“中，需要使用this._routerRoot._route.params来访问路径参数
    <!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->

    <!-- 注意：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 -->
    <!-- 例如： -->
    <!-- /movie/2?name=zs&age=20 是 fullPath 的值 -->
    <!-- /movie/2 是 path 的值 -->
    <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

fullpath和path