Vue--Router--路由传参的方法

迷南。 2023-09-29 16:54 9阅读 0赞

原文网址：[Vue--Router--路由传参的方法\_IT利刃出鞘的博客-CSDN博客][Vue--Router--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Vue Router路由传参的方式。

router-link标签和this.$router.push都可以进行路由跳转，见：[此文][Link 1]。本文使用router-link进行示例。

**需求**

本文展示用户列表页面到用户主页的跳转。在用户列表页面点击某个用户后，将这个用户的用户名传递给用户主页页面。

## **公共代码** ##

**路由配置**

router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import UserList from '../views/user/UserList'
    import UserHome from '../views/user/UserHome'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        redirect: '/userList'
      },
      {
        path: '/userList',
        name: 'UserList',
        component: UserList
      },
      {
        path: '/user',
        name: 'UserHome',
        component: UserHome
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

**用户主页**

UserList.vue

<template>
      <div>
        <div>用户名：{
       { userName }}</div>
        <div>用户昵称：{
       { nickName }}</div>
        <div>博客数量：{
       { blogCount }}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserHome',
      data () {
        return {
          userName: '',
          nickName: '',
          blogCount: 0
        }
      },
      methods: {
        getProfile (userName) {
          const _this = this
    
          // 省略：发请求，通过userName获得用户信息
    
          const user = {
            userName: userName,
            nickName: '这是昵称',
            blogCount: 121
          }
          _this.userName = user.userName
          _this.nickName = user.nickName
          _this.blogCount = user.blogCount
        }
      },
      created () {
        const userName = this.$route.params.userName
        this.getProfile(userName)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

## **传参的方式** ##

### 不带参数 ###

**用户列表页面：UserList.vue**

<template>
      <div class="user-list-container">
        <div class="user-item-box"
             :key="user.userName"
             v-for="user of users">
          <router-link :to="{name: 'UserHome'}">
          
            {
       { user.userName }}
          </router-link>
    
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserList',
      data () {
        return {
          users: {},
          current: 1,
          total: 0,
          size: 10
        }
      },
      methods: {
        page (current, size) {
          const _this = this
    
          const users = [
            {
              id: 1,
              userName: 'Tony',
              nickName: '刀刃'
            }, {
              id: 2,
              userName: 'Pepper',
              nickName: '天蓝'
            }
          ]
          _this.users = users
          _this.current = current
          _this.total = 122
          _this.size = users.length
        }
      },
      created () {
        this.page(1, 10)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

编程式写法：

this.$router.push({name: "UserHome"})

**用户主页页面：UserHome.vue**

使用this.$route.params.userName接收参数。（不修改公共代码）

**测试**

![49ac92d347cc48c082143a654f0a9146.gif][]

### params传参 ###

**简介**

传入参数

<router-link :to="{name: 'UserHome', params: {userName: user.userName}}">
      xxx
    </router-link>

接收参数

this.$route.params.userName

**缺点**

参数不显示在URL中，刷新页面时参数会丢失。解决方法是：使用[动态路由][Link 2]

**用户列表页面：UserList.vue**

<template>
      <div class="user-list-container">
        <div class="user-item-box"
             :key="user.userName"
             v-for="user of users">
          <router-link :to="{name: 'UserHome', params: {userName: user.userName}}">
          
          
            {
       { user.userName }}
          </router-link>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserList',
      data () {
        return {
          users: {},
          current: 1,
          total: 0,
          size: 10
        }
      },
      methods: {
        page (current, size) {
          const _this = this
    
          const users = [
            {
              id: 1,
              userName: 'Tony',
              nickName: '刀刃'
            }, {
              id: 2,
              userName: 'Pepper',
              nickName: '天蓝'
            }
          ]
          _this.users = users
          _this.current = current
          _this.total = 122
          _this.size = users.length
        }
      },
      created () {
        this.page(1, 10)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

编程式写法：

this.$router.push({name: "UserHome", params: {userName: userName}})

**用户主页页面：UserHome.vue**

使用this.$route.params.userName接收参数。（不修改公共代码）

**测试**

![d678dd89a1c9415382bcc474145b79c9.gif][]

可以看到：刷新页面时参数会丢失。

### query传参 ###

**简介**

传入参数

<router-link :to="{name: 'UserHome', query: {userName: user.userName}}">
      xxx
    </router-link>

或者

<router-link :to="{path: '/user', query: {userName: user.userName}}">
      xxx
    </router-link>

接收参数

this.$route.query.userName

**优点**

刷新页面时参数不会丢失。

**用户列表页面：UserList.vue**

<template>
      <div class="user-list-container">
        <div class="user-item-box"
             :key="user.userName"
             v-for="user of users">
          <router-link :to="{name: 'UserHome', query: {userName: user.userName}}">
          
          
            {
       { user.userName }}
          </router-link>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserList',
      data () {
        return {
          users: {},
          current: 1,
          total: 0,
          size: 10
        }
      },
      methods: {
        page (current, size) {
          const _this = this
    
          const users = [
            {
              id: 1,
              userName: 'Tony',
              nickName: '刀刃'
            }, {
              id: 2,
              userName: 'Pepper',
              nickName: '天蓝'
            }
          ]
          _this.users = users
          _this.current = current
          _this.total = 122
          _this.size = users.length
        }
      },
      created () {
        this.page(1, 10)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**用户主页页面：UserHome.vue**

<template>
      <div>
        <div>用户名：{
       { userName }}</div>
        <div>用户昵称：{
       { nickName }}</div>
        <div>博客数量：{
       { blogCount }}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserHome',
      data () {
        return {
          userName: '',
          nickName: '',
          blogCount: 0
        }
      },
      methods: {
        getProfile (userName) {
          const _this = this
    
          // 省略：发请求，通过userName获得用户信息
    
          const user = {
            userName: userName,
            nickName: '这是昵称',
            blogCount: 121
          }
          _this.userName = user.userName
          _this.nickName = user.nickName
          _this.blogCount = user.blogCount
        }
      },
      created () {
        const userName = this.$route.query.userName
        this.getProfile(userName)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

![1f20aac5b5ab406bb8fa71850922dab0.gif][]

可以发现：

1.  它的路径是这样显示的：[http://192.168.0.104:8080/\#/user?userName=Pepper][http_192.168.0.104_8080_user_userName_Pepper]
2.  刷新页面时参数不会丢失。

[Vue--Router--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126215316
[Link 1]: https://knife.blog.csdn.net/article/details/126215335
[49ac92d347cc48c082143a654f0a9146.gif]: https://img-blog.csdnimg.cn/49ac92d347cc48c082143a654f0a9146.gif
[Link 2]: https://knife.blog.csdn.net/article/details/126046132
[d678dd89a1c9415382bcc474145b79c9.gif]: https://img-blog.csdnimg.cn/d678dd89a1c9415382bcc474145b79c9.gif
[1f20aac5b5ab406bb8fa71850922dab0.gif]: https://img-blog.csdnimg.cn/1f20aac5b5ab406bb8fa71850922dab0.gif
[http_192.168.0.104_8080_user_userName_Pepper]: http://192.168.0.104:8080/#/user?userName=Pepper