Vue简单实例——路由2

在上一个章节我们说明了有关路由的基本使用以及嵌套路由、命名路由的使用，本章的内容我们讲解有关路由传参，编程式导航，路由拦截的部分内容，对应课本上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
                        }
                    ]
                }
            ]
        }
    ]
})

父路由组件中的内容：

子路由组件中的内容：

基本步骤：

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'
                        }
                    ]
                }
            ]
        }
    ]
})

父路由组件中的内容：

子路由组件中的内容：

基本步骤：

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

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

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

注意点：

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

编程式导航

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

父路由组件中的内容：

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

最后一附一张最终效果的组织架构结构图：