vue路由传参的几种基本方式

原文地址

---

this.$router.push跳转

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

methods：

方案一：

      getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

方案一，需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

       this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

 {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

    this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

对应路由配置：

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

this.$route.query.id

下面整理一下params传参和query传参的差别：

1、用法上的

　　刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了哦！！

2、展示上的

　　query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。

---

原文地址

router-link跳转

params传参（url中显示参数）

文件结构

定义路由：在定义path路由路径时定义参数名和格式，如  path: "/one/login/:num" ，router>index.js文件如下

/* eslint-disable*/

//第一步：引用vue和vue-router ，Vue.use（VueRouter）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//第二步：引用定义好的路由组件
import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'
import Log from '../components/log.vue'
import Reg from '../components/reg.vue'

//第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件
//第四步：通过new Router来创建router实例
export default new Router({
　　mode: 'history',
　　routes: [
　　　　{
　　　　　　path: '/one',
　　　　　　name: 'ChildOne',
　　　　　　component: ChildOne,
　　　　　　children:[
　　　　　　　　{
　　　　　　　　　　path:'/one/log/:num',
　　　　　　　　　　component:Log,
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path:'/one/reg/:num',
　　　　　　　　　　component:Reg,
　　　　　　　　},
　　　　　　],
　　　　},
　　　　{
　　　　　　path: '/two',
　　　　　　name: 'ChildTwo',
　　　　　　component: ChildTwo
　　　　}
　　]
})

在父路由组件上使用router-link进行路由导航，传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染，父路由组件childOne.vue 如下：

<template>
　　<div style="border:1px solid red;color:red;">
　　　　<p>这是父路由childOne对应的组件页面</p>
　　　　<p>下面可以点击显示嵌套的子路由 </p>
　　　　<router-link to="/one/log/123">显示登录页面</router-link>
　　　　<router-link to="/one/reg/002">显示注册页面</router-link>
　　　　<router-view></router-view>
　　</div>
</template>

子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数，子路由组件login.vue如下：

<template>
    <div style="border:1px solid orange;color:orange;">
        <p>登录界面：这是另一个嵌套路由的内容</p>
        <h3>{{this.$route.params.num}}</h3>
    </div>
</template>

效果：

 

注意：如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确，否则不断点击切换路由，会因为不断将传递的值显示添加到url中导致路由出错，如下：

 

传递的值存在url中存在安全风险，为防止用户修改，另一种方式不在url中显示传递的值

params传参（url中不显示参数）

定义路由时添加name属性给映射的路径取一个别名，router>index.js文件修改router如下：

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/one',
            name: 'ChildOne',
            component: ChildOne,
            children:[
                {
                    path:'/one/log/',
                    name:'Log',
                    component:Log,
                },
                {
                path:'/one/reg/',
                name:'Reg',
                component:Reg,
                },
            ],
        },
        {
            path: '/two',
            name: 'ChildTwo',
            component: ChildTwo
        }
    ]
})                

在父路由组件上使用router-link进行路由导航，使用   <router-link :to="{name:'home',params:{id:001}}>    形式传递参数。注意   ': to= ' 前面的冒号，childOne.vue组件修改如下：

<template>
    <div style="border:1px solid red;color:red;">
        <p>这是父路由childOne对应的组件页面</p>
        <p>下面可以点击显示嵌套的子路由 </p>
        <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
        <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
        <router-view></router-view>
    </div>
</template>

子路由组件页面获取父路由传参方式不变，reg.vue 文件如下：

<template>
    <div style="border:1px solid orange;color:orange;">
        <p>登录界面：这是另一个嵌套路由的内容</p>
        <h3>子路由获取的参数：{{this.$route.params.num}}</h3>
    </div>
</template>

注意：上述这种利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失；

使用Query实现路由传参

定义路由 router>index.js文件如下：

export default new Router({
　　mode: 'history',
　　routes: [
　　　　{
　　　　　　path: '/one',
　　　　　　name: 'ChildOne',
　　　　　　component: ChildOne,
　　　　　　children:[
　　　　　　　　{
　　　　　　　　　　path:'/one/log/',
　　　　　　　　　　component:Log,
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path:'/one/reg/',
　　　　　　　　　　component:Reg,
　　　　　　　　},
　　　　　　],
　　　　},
　　　　{
　　　　　　path: '/two',
　　　　　　name: 'ChildTwo',
　　　　　　component: ChildTwo
　　　　}
　　]
})

　　

修改路由导航 <router-link :to="{path:'/one/log',query:{num:123}}"> ，childOne.vue 文件修改如下：

<template>
　　<div style="border:1px solid red;color:red;">
　　　　<p>这是父路由childOne对应的组件页面</p>
　　　　<p>下面可以点击显示嵌套的子路由 </p>
　　　　<router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
　　　　<router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
　　　　<router-view></router-view>
　　</div>
</template>

　　

子路由组件通过 this.$route.query.num 来显示传递过来的参数，reg.vue 文件如下：

<template>
　　<div style="border:1px solid purple;color:purple;">
　　　　<p>注册界面：这是二级路由页面</p>
　　　　<h3>{{this.$route.query.num}}</h3>
　　</div>
</template>

　　

效果如下：

 

PS: 在第一步的定义路由中我们都使用了mode：history 作用就是去除路由跳转时路由路径前的 “#”

常用的mode模式有两种：

默认为hash模式，最明显的标志是，URL上有#号 localhost:8080/#/，路由会监听#后面的信息变化进行路由匹配

另一种为history模式，不会有#出现，很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合

默认不使用mode：history 如下

 

---

返回目录