十八、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​​