vue-router动态路由之params、query传参

动态路由：把 hash 地址中可变部分定义为参数项，从而提高路由规则的复用性。以下是动态路由的两种传参方式。

1. 第一种传参方式

• 路由规则 :id 为自定义名

  { path : "/movie/:id", component : Movie }

• 跳转链接

<router-link to="/movie/1"> 电影1 </router-link>
<router-link to="/movie/2"> 电影2 </router-link>
<router-link to="/movie/3"> 电影3 </router-link>

• 在 movie 组件中，根据 id 的值，动态展示内容详情

   this.$route.params.id
   // this.$route 为路由的参数对象
   // this.$router 为路由的导航对象

2. 第二种传参方式

• 开启 props=true 传值

  { path : "/movie/:id", component : Movie, props:true }

<router-link to="/movie/1"> 电影1 </router-link>
<router-link to="/movie/2"> 电影2 </router-link>
<router-link to="/movie/3"> 电影3 </router-link>

• 在 Movie.vue 组件中通过 props 接收

    export default {
      name:"Movie",
      props:['id'] //模板中便可以使用 {{id}}
    }

---

3. 第三种传参方式

• 在 hash 地址中，? 后边的参数项叫做“查询参数”。使用 this.$route.query 取值。

<router-link to="/movie?name=1"> 电影1 </router-link>

this.$route.query.name