十八、Vue之动态路由和get传值

一、动态路由传递数值

（一）动态路由的基本概念

  为了更好地理解动态路由，我这里举一个例子：
  比如我搜索书籍，在搜索页面会出现好多书籍组成的列表，这个时候，若我点击某本书籍的列表，那么就会跳转到该书籍的详情页面，这里的动态跳转就是所谓的动态路由。

（二）动态路由传递数值

1.创建详情页面组件（Detail.vue）

<template>
    <div>
        这里是详情页面
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    mounted() {
    	// this.$route.params.id：可以获取到 动态路由 传递过来的id
        console.log(this.$route.params.id);
    }
}
</script>

2.创建该组件的路由（main.js）
（1）引入该组件

import Detail from "./components/Detail.vue";

（2）配置该组件的路由

:id就是动态传递给详情页面的数值

const routes = [
  { path: '/detail/:id', component: Detail }
]

配置路由的其他操作，参见上一讲，这里不再赘述！

3.在“书籍列表页面”设置详情页面的<router-link>

其中 key 就相当于书籍的 id，通过将书籍的id传递给详情页面，来决定显示哪一本书的详情！注意 url 拼接的写法：:to="'/detail/' + key"

<template>
    <div>
        我是右兄弟组件
        <br>
        <ul>
            <li v-for="(item,key) in list" :key="key">
                <router-link :to="'/detail/' + key">{{item}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
// 1.引入VueEvent(广播事件对象)
import VueEvent from "../util/VueEvent.js";

export default {
    data(){
        return {
            list: ['111111','222222','333333']
        }
    }
}
</script>

在详情页面中，即可通过 this.$route.params.id 获取该组件动态传递过去的 id

二、get 传递数值

get 传值和上面的步骤基本一致，不同的地方有两处：

1. main.js中配置路由：{ path: '/content', component: Content }，不再是{ path: '/detail/:id', component: Detail }
2. 路由链接：<router-link :to="'/content?id=' + key">{{item}}</router-link>，不再是<router-link :to="'/detail/' + key">{{item}}</router-link>
   3.接收传递值方式：this.$route.query.id，不再是this.$route.params.id