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属性的值换到了与点击事件绑定的方法中,编程式导航的好处是将路由组件的跳转变得更方便了

最后一附一张最终效果的组织架构结构图:
Vue简单实例——路由2_第1张图片

你可能感兴趣的:(vue.js,javascript,前端)