vue-router-参数

一、概要

vue-router传递参数分为两大类

• 编程式 router.push
• 声明式

声明式传递参数的方式有三种:

• 通过 标签中的to传参
• 用url传参
• 用name传值（不推荐）

二、标签中to传参

语法格式

说明

• :to 表示绑定参数,对象形式
• name：就是在路由文件中的name值
• params：就是我们要传的参数，对象形式，在对象里可以传递多个值

栗子

router/index.js

export  default  new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            name: "home",
            component: Home,
            children: [
                {
                    path: "to",
                    name: "toParams",
                    component: RouterToParams
                }
            ]
        },

    ]
});

Home.vue

RouterToParams.vue

三、url传参

语法格式

path: "/:参数?/:参数?"

说明

• 在路由文件里采用冒号的形式传参，就是对参数的绑定
• ?表示可选参数

栗子

router/index.js

export default new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            name: "home",
            component: Home,
            children: [
                {
                    path: "params/:page/:size/",
                    name: "url",
                    component: RouterUrlParams
                }
            ]
        },

    ]
});

Home.vue

RouterUrlParams.vue

补充说明

有些时候我们希望传递参数先做一些限制，这时候我们就需要在传递时有个基本的类型判断，vue支持正则表达式,例如在路由中

path:'/:参数(正则)/'
例如:
path:'/:uid(\\d+)'

四、声明式编程

1、说明

主要通过涉及到两个类

• **$router : **路由操作对象，只写对象
• $route : 路由信息对象，只读对象

2、编程式的导航 router.push

编程式导航传递参数有两种类型：

• 字符串

  字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数

• 对象

  想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，

3、命名路由

命名路由的前提就是在注册路由的地方设置name属性

export default new VueRouter({
    routes: [
        {
            path: "/pro",
            name: "pro",
            component: ProgramRouter
        }
    ]
});

使用方法

4、传递参数

query传递参数

query可以使用name传参，也可以使用path

router/index.js

export default new VueRouter({
    routes: [
        {
            path: "/query",
            name: "query",
            component: ProgramRouter
        },
    ]
});

父组件

获取参数

$route.query.page
$route.query.size

params传递参数

query可以使用name传参，不可以使用path

router/index.js

export default new VueRouter({
    routes: [
        {
            name: "query",
            component: ProgramRouter
        },
    ]
});

父组件

获取参数

$route.params.page
$route.params.size