在上一个章节我们说明了有关路由的基本使用以及嵌套路由、命名路由的使用，本章的内容我们讲解有关路由传参，编程式导航，路由拦截的部分内容，对应课本上134到144页的内容，我们也会尽量用课本上的案例进行演示。

首先是有关路由传参部分的内容：

query的方式：

在路由传参中有两种方式进行参数的传递，第一种就是query的方式，这种方式主要的特征就是在传递参数的时候，要先再路由规则的path属性中使用占位符进行占位，然后在传递参数的时候，参数的形式是以二级目录的形式进行传递。然后将to属性的参数变成一个对象，传递的参数就在to属性的值这个对象中进行设定

首先需要再创建一个二级路由，达成三层路由嵌套，最底层的路由组件就是用来显示接受到的参数的路由组件：

路由器文件中的内容：

//该文件专门用于创建整个应用的路由器
//首先导入vue-router的插件
import VueRouter from "vue-router";
//引入用来显示的组件
import routerOne from "@/page/router-one";
import routerTwo from "@/page/router-two";
// 这个组件是用来动态的接收参数并显示的
import detail from "@/page/detail"
//嵌套路由的组件
import routerNext from "@/page/router-next";

//创建一个路由实例,在实例里面传入一个参数,该对象的参数用于设定路由规则
export default new VueRouter({
    //这里的routers对应的就是一个路由器可以管理很多的路由
    routes:[
        //既然是可以管理很多的路由,那么这个路由器里面就可以放置很多的路由对象
        {
            path:'/one',//这里的path属性就是对应的kay
            component:routerOne//component就是对应的value,并且也表明了value的类型,属于是前端路由
        },
        {
            path:'/two',
            component:routerTwo,
            //在第二个路由组件中设置一个children属性,属性的值就是嵌套路由的地址和组件
            children:[
                {
                    name:'next',
                    path:'next',
                    component:routerNext,//最后就是嵌套路由的显示组件
                    // 这个子组件的作用是用来显示不同的内容
                    children:[
                        {
                            path:'detail',
                            component:detail
                        }
                    ]
                }
            ]
        }
    ]
})

父路由组件中的内容：

<template>
  <div>
    <ul v-for="item in items" :key="item.name">
      <!-- 在传递query参数的时候，需要使用v-bind绑定to属性，这时候to属性的参数就可以是一个对象了 -->
      <!-- 在这个对象中，path属性就是路由路径，query的值就是传递的参数 -->
    <router-link :to="{
      path:'/two/next/detail',
      query:{
        id:item.id
      }
    }">
    {{item.id}}
  </router-link>
  </ul>
  <hr>
  <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "router-next",
  data(){
    return{
      items:[
        {name:'张三',id:'001'},
        {name:'李四',id:'002'},
        {name:'王五',id:'003'}
      ]
    }
  }
}
</script>

<style scoped>

</style>

子路由组件中的内容：

<template>
    <div>
        <ul>
            <!-- 在父路由组件中传递参数，在子路由组件中接收的时候就需要使用一个属性：$route -->
            <!-- route属性保存的就是这个组件的路由信息，其中的query属性就是我们刚才传递的参数 -->
            <!-- id属性就是我们之前传递的时候在to中设置的参数名称 -->
            <li>用户ID:{{this.$route.query.id}}</li>
        </ul>
    </div>
</template>

<script>
    export default{
        name:'Detail_demo',
        mounted(){
            console.log(this);
        }
    }
</script>

<style scoped>

</style>

基本步骤：

1.首先定义一个用来显示接受参数的路由组件，然后在路由器文件中定义路由的地址

2.在父路由组件中定义跳转链接，并将to用v-bind指令绑定，并将to的值变成一个对象，设置path属性和query属性，query就是我们传递参数的属性。

3.在显示接受参数的路由组件中用差值表达式，使用$route.query.参数的形式来接受参数

parms形式：

之前说过，传递参数有两种方式，第二种方式就是通过params的方式，也就是在导航栏中传递参数，类似于我们使用get请求的时候，参数都写在地址栏的最后，一个问号“？”表示开始传递参数，多个参数之间用“&”分开，接下来我们就用代码的方式来看这个操作是如何实现的：

路由器文件中的内容：

//该文件专门用于创建整个应用的路由器
//首先导入vue-router的插件
import VueRouter from "vue-router";
//引入用来显示的组件
import routerOne from "@/page/router-one";
import routerTwo from "@/page/router-two";
// 这个组件是用来动态的接收参数并显示的
import detail from "@/page/detail"
//嵌套路由的组件
import routerNext from "@/page/router-next";

//创建一个路由实例,在实例里面传入一个参数,该对象的参数用于设定路由规则
export default new VueRouter({
    //这里的routers对应的就是一个路由器可以管理很多的路由
    routes:[
        //既然是可以管理很多的路由,那么这个路由器里面就可以放置很多的路由对象
        {
            path:'/one',//这里的path属性就是对应的kay
            component:routerOne//component就是对应的value,并且也表明了value的类型,属于是前端路由
        },
        {
            path:'/two',
            component:routerTwo,
            //在第二个路由组件中设置一个children属性,属性的值就是嵌套路由的地址和组件
            children:[
                {
                    name:'next',
                    path:'next',
                    component:routerNext,//最后就是嵌套路由的显示组件
                    // 这个子组件的作用是用来显示不同的内容
                    children:[
                        {
                            // 占位符，用来在以params的形式传递参数的时候判断从第几层目录开始为参数
                            path:'detail/:id',
                            component:detail,
                            // 在使用对象语法传递params参数的时候，必须使用name属性代替path
                            name:'detail'
                        }
                    ]
                }
            ]
        }
    ]
})

父路由组件中的内容：

<template>
  <div>
    <ul v-for="item in items" :key="item.name">
      <!-- 在传递query参数的时候，需要使用v-bind绑定to属性，这时候to属性的参数就可以是一个对象了 -->
      <!-- 在这个对象中，path属性就是路由路径，query的值就是传递的参数 -->
    <!-- <router-link :to="{
      path:'/two/next/detail',
      query:{
        id:item.id
      }
    }"> -->
    <!-- 在使用params的形式传递参数的时候，可以用模板转换的方式进行参数的传递 -->
    <!-- 所谓模板转换就是在字符串中如果想插入变量，可以用双引号中使用模板符号，然后在需要引入变量的地方使用模板字符串 -->
  
    <!-- <router-link :to="`/two/next/detail/${item.id}`"> -->
    <!-- 在接受params参数的时候，除了可以使用模板语法，也可以使用对象语法 -->
  <router-link :to="{
    name:'detail',
    params:{
      id:item.id
    }
  }">
    {{item.id}}
  </router-link>
  </ul>
  <hr>
  <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "router-next",
  data(){
    return{
      items:[
        {name:'张三',id:'001'},
        {name:'李四',id:'002'},
        {name:'王五',id:'003'}
      ]
    }
  }
}
</script>

<style scoped>

</style>

子路由组件中的内容：

<template>
    <div>
        <ul>
            <!-- 在父路由组件中传递参数，在子路由组件中接收的时候就需要使用一个属性：$route -->
            <!-- route属性保存的就是这个组件的路由信息，其中的query属性就是我们刚才传递的参数 -->
            <!-- id属性就是我们之前传递的时候在to中设置的参数名称 -->
            <!-- <li>用户ID:{{this.$route.query.id}}</li> -->

            <!-- 在使用params的形式传递参数的时候，需要将query参数换成params声明接受 -->
            <!-- 注意在接受参数的时候，要使用跟占位符一样的参数来接受 -->
            <li>{{this.$route.params.id}}</li>
        </ul>
    </div>
</template>

<script>
    export default{
        name:'Detail_demo',
        mounted(){
            console.log(this.$route);
        }
    }
</script>

<style scoped>

</style>

基本步骤：

1.首先定义一个用来显示接受参数的路由组件，然后在路由器文件中定义路由的地址

2.在父路由组件中定义跳转链接，并将to用v-bind指令绑定，并将to的值变成一个对象，设置name属性和params属性，其中的params属性就是我们要传递的参数

3.在显示接受参数的路由组件中用差值表达式，使用$route.params.参数的形式来接受参数

注意点：

在使用对象语法的方式写入参数的时候，只能使用name属性而不能使用path属性，并且声明接受的时候要是用params接受，最后的参数要和路由器文件中的占位符的名字保持一致

编程式导航

在我们之前进行导航之间的跳转的时候使用的是标签的形式，但是在有些时候，我们并不能使用标签，比如我们要是用一个按钮的形式来触发跳转的动作的时候，就需要使用到我们的编程式导航，简单来说，编程式导航就是在不使用标签的情况下完成路由的跳转：

父路由组件中的内容：

<template>
  <div>
    <ul v-for="item in items" :key="item.name">
      <!-- 在传递query参数的时候，需要使用v-bind绑定to属性，这时候to属性的参数就可以是一个对象了 -->
      <!-- 在这个对象中，path属性就是路由路径，query的值就是传递的参数 -->
    <!-- <router-link :to="{
      path:'/two/next/detail',
      query:{
        id:item.id
      }
    }"> -->
    <!-- 在使用params的形式传递参数的时候，可以用模板转换的方式进行参数的传递 -->
    <!-- 所谓模板转换就是在字符串中如果想插入变量，可以用双引号中使用模板符号，然后在需要引入变量的地方使用模板字符串 -->
  
    <!-- <router-link :to="`/two/next/detail/${item.id}`"> -->
    <!-- 在接受params参数的时候，除了可以使用模板语法，也可以使用对象语法 -->
  <!-- <router-link :to="{
    name:'detail',
    params:{
      id:item.name
    }
  }">
    {{item.id}}
  </router-link> -->
  
  <!-- 在之前的案例中，我们完成跳转都是在标签中完成的，而现在我们要在按钮中完成跳转动作的触发 -->
  <!-- 定义一个按钮，绑定一个点击事件，将数据参数传递进去 -->
  <button @click="change(item)">
    {{item.id}}
  </button>
  </ul>
  <hr>
  <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "router-next",
  data(){
    return{
      items:[
        {name:'张三',id:'001'},
        {name:'李四',id:'002'},
        {name:'王五',id:'003'}
      ]
    }
  },
  methods:{
    // 在方法中定义这个参数，触发的对象就是router的push属性
    // 参数和之前to的参数是一样的，都有name，path，和传递参数的属性
    change(item){
      this.$router.push({
        name:'detail',
        params:{
        id:item.name
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

编程式导航的区别无非就是将标签换成了按钮，然后将之前在to属性的值换到了与点击事件绑定的方法中，编程式导航的好处是将路由组件的跳转变得更方便了