// 路由中的动态参数声明,冒号后面是动态参数的名称
{path: '/movie/:id', component: Movie}
// 上面的代码将以下3个路由规则合并成了一个，提高了路由规则的复用性
{path: '/movie/1', component: Movie},
{path: '/movie/2', component: Movie},
{path: '/movie/3', component: Movie}

// 需求：在movie组件中，根据id的值展示对应电影的详细信息
// 在Movie组件中，打印this，输出的是Movie组件实例对象
// 在对象中有一个$route属性，值是一个对象。该对象中有一个params属性，属性值就是保存 我们设置的动态参数 的对象 params: {id: 1}
// 则通过this.$route.params.参数名,可以获得当前路由对应的参数的值(this.$route.params.id)

// 在当前项目的路由模块src/router/index.js中
const router = new VueRouter({
  // routes是一个数组，作用：定义hash地址与组件之间的对应关系
  routes: [
    // 重定向的路由规则
    {path: '/', redirect: '/home'},
    // 路由规则
    {path: '/home', component: Home},
    // 动态路由    要开启props传参，才可以通过 自定义属性 获取这个动态参数的值
    // :id和:title就是传递的params参数  (由?开头，数据之间由&连接的是query参数)
    // props:布尔值，若布尔值为真，则该路由收到的所有params参数都以props的形式传给Movie组件
    {path: '/movie/:id/:title', component: Movie, props: true},
    {path: '/about', component: About, children: [  // children子路由规则    
      // 默认子路由：如果children数组中，某个路由规则的path值为空字符串，则这条路由规则就是 ‘默认子路由’
      {path: '', component: Tab1},
      {path: '/tab2', component: Tab2}
    ]}
  ]
})
export default router

// 在Movie组件中
<template>
  <div class="movie-container">
    <!-- this.$route是路由的"参数对象" -->
    <h3>Movie组件 --- {{this.$route.params.id}} --- {{ id }} </h3>
    <!-- 上面两个得到的id是一样的 -->
  </div>
</template>
<script>
  export default {
    name: 'Movie',
    props: ['id', 'title'], //接收props数据
  }
</script>

// 通过查询参数传递数据
<router-link to="/home/message/detail?id=666&title=你好啊"></router-link>
// 传递的数据可以通过$route.query来获取