路由跳转传参

路由跳转传参

---

一、路由跳转的几种方式

1. 第一种：声明式导航

router-link（必须要有to属性），可以实现路由的跳转

2. 第二种：编程式导航

利用的是组件实例的$router.push|replace方法，可以实现路由的跳转

编程式导航优于声明式导航，编程式导航在跳转之前可以先处理一些业务

二、编写页面

1、安装所需的包

在控制台输入命令来安装所需的包

npm i vue-router@3 --save

注意：我们需要安装的是3.x.x版本，vue2已经不支持最新的vue-router了

2、编写页面

编写简单的页面作为展示

1. 新建好路由组件
2. 配置路由

路由组件如下：

在src下新建pages用于保存路由组件，在pages文件下新建两个文件夹分别命名为：hello、world

hello的组件样式为:

<template>
  <div>
    hello：发起<br />
    <!-- 1 -->
    账号:<input v-model="text" />
    <!-- 2 -->
    密码:<input v-model="password" />
    <button @click="toWorld">跳转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'admin',
      password: '123456'
    }
  },
  methods: {
    toWorld() {
      this.$router.push('/world')
    }
  }
}
</script>

world的组件样式为:

<template>
  <div>
    world：接收<br />
    <!-- 1 -->
    展示账号：<span></span><br />
    <!-- 2 -->
    展示密码：<span></span>
  </div>
</template>

<script>
export default {}
</script>

在src下新键router文件夹用于管理路由，在该文件夹下创建index.js文件

文件夹的内容为：

// 引入
import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 配置路由
export default new VueRouter({
  // 配置路由
  routes: [
    {
      path: '/',
      redirect: '/hello'
      // component: () => import('../pages/hello/hello-index.vue')
    },
    {
      path: '/hello',
      component: () => import('../pages/hello/hello-index.vue')
    },
    {
      // path: '/world/:keyword?',  // 伏笔
      path: '/world/:keyword',
      component: () => import('../pages/world/world-index.vue')
    }
  ]
})

在入口文件需要引入

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import router from '../src/router'

new Vue({
  render: (h) => h(App),
  router
}).$mount('#app')

三、路由跳转传参的几种写法

1. 了解参数

1. params参数

属于路径中的一部分，但在我们配置路由的时候需要占位

2. query参数

不属于路径中的一部分，（/index?k=v） 不需要占位

2. 写法

第一种写法：

字符串形式：

修改hello文件的点击函数：

methods: {
    toWorld() {
      this.$router.push('/world/' + this.text + '?password=' + this.password)
    }
  }

跳转之后通过vue的开发工具查看：

在world接收：

<template>
  <div>
    world：接收<br />
    <!-- 1 -->
    展示账号：<span>{{ $route.params.keyword }}</span>
    <!-- 2 -->
    <br />
    展示密码：<span>{{ $route.query.password }}</span>
  </div>
</template>

点击跳转之后，world就会接收参数作为展示

第二种写法：

模板字符串写法：

修改hello的跳转方式：

methods: {
    toWorld() {
      this.$router.push(`/world/${this.text}?password=${this.password}`)
    }
  }

第三种写法：

对象写法：

我们需要在router/index.js文件里面给需要跳转的路由命名：

{
   path: '/world/:keyword?',
   component: () => import('../pages/world/world-index.vue'),
   name:'world'
 }

修改hello的跳转方式：

methods: {
    toWorld() {
      this.$router.push({
        name: 'world',
        params: {
          keyword: this.text
        },
        query: {
          password: this.password
        }
      })
    }
  }

但是我们会发现，一直点击的话会有报错，是因为vue-router来设计的时候采用了promise ，所以我们

需要增加成功和失败的回调就可以解决：

this.$router.push({
        name: 'world',
        params: {
          keyword: this.text
        },
        query: {
          password: this.password
        }
      },()=>{},()=>{})

四、了解更多

1、路由传递参数（对象写法）path是否可以结合params参数一起使用?

修改hello的跳转方式：

methods: {
    toWorld() {
      this.$router.push({
        path:'/world',
        params: {
          keyword: this.text
        },
        query: {
          password: this.password
        }
      })
    }
  }

当我们点击跳转的时候可能出现一下几种情况：

1. 路由不能跳转，可以在url地址栏看到query参数，控制台报错
2. 路由能跳转，控制台爆出提示不推荐这样使用，收不到params参数
3. 路由可以跳转，控制台不报错，但是在world组件只能收到query参数

总结：path不可以结合params参数一起使用

2、如何指定params参数可传可不传?

修改hello的跳转方式：

methods: {
    toWorld() {
      this.$router.push({
        name: 'world',
        query: {
          password: this.password
        }
      })
    }
  }

当我们在配置路由的时候，进行了占位，但是不携带params参数的时候跳转，点击跳转，路由可以跳

转，但是控制台报出了警告，我们的路径会出现问题

解决这个问题我们需要在配置路由的时候，在占位的末尾打上一个 “?” ，见顶部 “ 编写页面 ”

3、params参数可以传递也可以不传递，但是如果传递是空串，如何解决?

修改hello的跳转方式：

  methods: {
    toWorld() {
      this.$router.push({
        path:'/world',
        params: {
          keyword: ''
        },
        query: {
          password: this.password
        }
      })
    }
  }

当我们点击跳转的时候，我们发现地址栏的地址缺少world，控制台也报出了警告

解决这个问题我们可以使用undefined来解决，我们需要修改params：

 params: {
          keyword: '' || undefined
        },

这样就可以解决了

4、路由组件能不能传递props数据?

路由组件可以传递props数据，总共有三种写法：

先把hello的跳转方式修改成正常的跳转，找到router/index.js文件：

1、布尔值写法：

   {
      path: '/world/:keyword?',
      component: () => import('../pages/world/world-index.vue'),
      name:'world',
      // 布尔值写法：params
      props:true
    }

在world页面就可以接收:

<script>
export default {
  props: ['keyword']
}
</script>

页面的展示直接使用差值语法写上keyword即可

2、对象写法：

// 额外给路由组件传递一些数据
props:{
	a : 1,
	b : 2
}

在world页面就可以接收:

<script>
export default {
  props: [ 'a' , 'b' ]
}
</script>

3、函数写法

// 可以params参数、query参数，通过props传递给路由组件
props: ($route) => {
        return {
          keyword: $route.params.keyword,
          password: $route.query.password
        }
      }

在world页面就可以接收:

<script>
export default {
  props: ['keyword', 'password']
}
</script>

一般来说，这三种方法里面函数方法常用一点

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了路由跳转传参的几种方式以及一些关于路由的一些问

题，结合实际使用合适的传参方式。