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

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

简介

说明

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

        router-link标签和this.$router.push都可以进行路由跳转，见：此文。本文使用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

 
<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接收参数。（不修改公共代码）

测试

params传参

简介

传入参数

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

接收参数

this.$route.params.userName

缺点

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

用户列表页面：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接收参数。（不修改公共代码）

测试

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

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>

测试

可以发现：

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