Vue.js - 路由 vue-router 的使用详解2（参数传递）

一、使用冒号（:）的形式传递参数

1，路由列表的参数设置

（1）路由列表的 path 是可以带参数的，我们在路由配置文件（router/index.js）里以冒号的形式设置参数。

（2）下面样例代码中，我在跳转到欢迎页面（/hello）时，带有两个参数：id 和 userName。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
 
//Vue全局使用Router
Vue.use(Router)
 
export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
    },
    {
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello
    }
  ]
})

2，参数的传递

（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：

<router-link to="/hello/123/hangge">跳转到 hello</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push("/hello/123/hangge");

3，参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。

<template>
  <div>
    <h1>ID：{{ $route.params.id}}</h1>
    <h1>用户名：{{ $route.params.userName}}</h1>
  </div>
</template>

4，运行效果

可以看到点击首页链接进行跳转后，参数成功传递并显示。

　　　　　

 

二、使用 query 方式传递参数

1，路由列表

query 方式类似 get 传参，即通过 URL 传递参数。而路由列表的 path 不需要配置参数：

import Vue from 'vue'

import Router from 'vue-router'

import index from '@/components/index'  //引入首页组件

import hello from '@/components/hello'  //引入欢迎页组件

 

//Vue全局使用Router

Vue.use(Router)

 

export default new Router({

  routes: [ //配置路由，使用数组形式

    {

      path: '/',   //链接路径

      name: 'index',  //路由名称

      component: index//映射的组件

    },

    {

      path: '/hello',

      name: 'hello',

      component: hello

    }

  ]

})

2，参数的传递

（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：

<router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
  跳转到 hello
</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push({
  path:'/hello',
  query:{id:123, userName:'hangge'}
});

3，参数的获取

页面中通过 $route.query.xxx 获取传递过来的数据。

<template>
  <div>
    <h1>ID：{{ $route.query.id}}</h1>
    <h1>用户名：{{ $route.query.userName}}</h1>
  </div>
</template>

4，运行效果 

可以看到点击首页链接进行跳转后，参数是自动拼接到 url 后面进行传递的。

三、使用 params 方式传递参数

1，路由列表

params 方式类似于 post 传参，即传递的参数不会显示在 URL 上。同上面的 query 方式一样，路由列表的 path 不需要配置参数：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
 
//Vue全局使用Router
Vue.use(Router)
 
export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index//映射的组件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})

2，参数的传递

注意：params 只能用 name 来引入路由，而不能用 path。

（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：

<router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
  跳转到 hello
</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push({
  name:'hello',
  params:{id:123, userName:'hangge'}
});

3，参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。

<template>
  <div>
    <h1>ID：{{ $route.params.id}}</h1>
    <h1>用户名：{{ $route.params.userName}}</h1>
  </div>
</template>

4，运行效果

可以看到这种方式，参数的传递不会拼接到 url 后面。

 

附：使用 props 实现参数解耦 

    从上面的样例可以看出，当路由携带参数跳转时，页面这边通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。但这样有个问题，由于组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

    要解决这个问题，我们可以使用 props 将组件和路由解耦。props 共有如下三种模式。

 

1，布尔模式

（1）直接将路由配置中的 props 属性被设置为 true，那么参数将会被设置为组件属性。

export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
    },
    {
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello,
      props: true
    }
  ]
})

（2）然后我们页面组件这边不再需要通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。

<template>
  <div>
    <h1>ID：{{ id }}</h1>
    <h1>用户名：{{ userName}}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['id', 'userName']
  }
</script>

2，对象模式

（1）我们可以将 props 设置为一个对象，对象内容会被设置为组件属性。这种方式常用来配置静态参数。

export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello,
      props: {
        id: 1234,
        userName: "hangge"
      }
    }
  ]
})

（2）然后页面组件这边获取数据方式和前面一样。

<template>
  <div>
    <h1>ID：{{ id }}</h1>
    <h1>用户名：{{ userName}}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['id', 'userName']
  }
</script>

3，函数模式

（1）我们还可以创建一个函数返回 props，在函数中对参数值进行处理，或者将静态值与基于路由的值结合。

function dynamicPropsFunc (route) {
  return {
    message: "欢迎您：" + route.params.userName
  }
}
 
export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello,
      props: dynamicPropsFunc
    }
  ]
})

（2）这里假设我们使用 JS 进行跳转，代码如下：

this.$router.push({
  name:'hello',
  params:{id:123, userName:'hangge'}
});

 

（3）目标页面组件代码，以及运行结果如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['message']
  }
</script>